根據屏幕大小（React）以不同的順序渲染組件

Question

我正在嘗試弄清楚如何在移動視圖中以不同的方式呈現組件（我希望它出現在移動端的標題之前，否則之后）

我現在的代碼是

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}
    );
  }

}

但是這不起作用（未定義組件），我想我不能只將組件設置為字符串，但希望這足以提供有關正確方法的任何建議的信息

謝謝！

Answer 1

您的代碼有幾個問題，有關更多詳細信息，請參閱注釋：

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;
  }

}

此外，我會將這個邏輯移到渲染方法中，不要使用狀態來存儲組件，而是直接渲染它。 例如：

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>
       );
     }
  }

}

Answer 2

我認為你應該在render()方法中有你的渲染邏輯。 您可以使用matchMedia()根據分辨率或方向以不同方式呈現組件 - 與使用媒體查詢時類似。

https://developer.mozilla.org/pl/docs/Web/API/Window/matchMedia

Answer 3

你可以試試這個：

componentWillMount = () => {
            let mql = window.matchMedia("all and (max-width: 767px)")
            if (mql.matches) { // if media query matches
                document.body.style.backgroundColor = "#fff";
            } else {
                document.body.style.backgroundColor = "#2d74da";
            }
        }
    componentWillUnmount = () => {
            document.body.style.backgroundColor = null;
        }