javascript - 根据屏幕尺寸以不同的顺序渲染组件（反应）(Render component in different order depending on screen-size (React))

Question

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

Answer 1

Your code has several issues, see comments for more details:(您的代码有几个问题，有关更多详细信息，请参见注释：)

export default class App extends Component { constructor(props) { super(props); // typo: use `=` instead of `:` let width = window.innerWidth; // dont use setState in constructor, initialize state instead this.state = {}; if (width > 768) { // set renderComponent property according to window size // components are declared using JSX, not string (do not use ``) this.state.renderComponent = ( <div className="container"> <NavigationBar /> <SiteHeader /> {this.props.children} </div> ); } else { this.state.renderComponent = ( <div className="container"> <NavigationBar /> <SiteHeader /> {this.props.children} </div> ); } } render() { // access state through `this.state` // you don't need {} while it is not inside JSX return this.state.renderComponent; } } Furthermore I would move this logic to the render method, don't use state to store components but render it directly.(此外，我会将这种逻辑移至render方法，不使用状态存储组件而是直接渲染它。) For example:(例如：) export default class App extends Component { render() { let width = window.innerWidth; if (width > 768) { return ( <div className="container"> <NavigationBar /> <SiteHeader /> {this.props.children} </div> ); } else { return ( <div className="container"> <NavigationBar /> <SiteHeader /> {this.props.children} </div> ); } } }