I'm trying to work out how I would render a component differently in mobile view (I would like it to appear before my header in mobile, but after otherwise)(我正在尝试弄清楚如何在移动视图中以不同的方式呈现组件(我希望它出现在移动头中,但在其他位置之后))
The code I have at the minute is(我现在的代码是)
import React from 'react';
import NavigationBar from './NavigationBar';
import SiteHeader from './SiteHeader';
export default class App extends Component {
constructor(props) {
super(props);
let width = window.innerWidth;
if (width > 768) {
this.setState(renderComponent =
`<div className="container">
<NavigationBar />
<SiteHeader />
{this.props.children}
</div>`
);
} else {
this.setState(renderComponent =
`<div className="container">
<NavigationBar />
<SiteHeader />
{this.props.children}
</div>`
);
}
}
render() {
return (
{renderComponent}
);
}
}
However this is not working (Component is not defined), I figured I couldn't just set the component as strings but hopefully this is enough info for any suggestions on the correct way to do it(但是,这是行不通的(未定义组件),我认为我不能只是将组件设置为字符串,但希望这对于有关正确方法的任何建议是足够的信息)
Thanks!(谢谢!)
ask by does_not_compute translate from so
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…