根据屏幕大小以不同的顺序呈现组件(React)

Render component in different order depending on screen-size (React)

本文关键字：顺序 组件 React 屏幕      更新时间：2023-09-26

我正试图找出如何在移动视图中呈现不同的组件(我希望它出现在我的移动头部之前，但之后)

我现在的代码是

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

然而，这是不工作(组件未定义)，我想我不能只是将组件设置为字符串，但希望这是足够的信息对正确的方法来做它的任何建议

谢谢!

你的代码有几个问题，详见注释:

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

我认为你应该在render()方法中有你的渲染逻辑。您可以使用matchMedia()根据分辨率或方向以不同的方式呈现组件-类似于使用媒体查询。

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

你可以试试:

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;
        }
相关文章：