reactjs - react如何根据屏幕宽度进行条件渲染？

Question

有一个问题，我不知道如何在技术上正确地实现该组件。我想做一个元素的条件渲染取决于设备屏幕。示例:如果屏幕小于 700 像素，则我得出一个结论，如果大于则第二个

if(window.innerWidth > 700) {
   return(
    <Content>
       1 
    </Content>)
};
return (
<Content>
       2
</Content>)

我使用 react、next js 和 typeScript 技术

如何做到这一点？

Answer 1

在组件中创建宽度状态，并在窗口调整大小事件时更新状态，如下所示:

const App = () => {
  const [width, setWidth] = React.useState(window.innerWidth);
  const breakpoint = 700;
  React.useEffect(() => {
   const handleResizeWindow = () => setWidth(window.innerWidth);
    // subscribe to window resize event "onComponentDidMount"
    window.addEventListener("resize", handleResizeWindow);
    return () => {
      // unsubscribe "onComponentDestroy"
      window.removeEventListener("resize", handleResizeWindow);
    };
  }, []);
  if (width > breakpoint) {
    return (
      <div>
        <h3>Component 1</h3>
        <p>Current width is {width} px</p>
      </div>
    );
  }
  return (
    <div>
      <h3>Component 2</h3>
      <p>Current width is {width} px</p>
    </div>
  );
}


class Root extends React.Component {
  render() {
    return (
      <App/>
    );
  }
}

ReactDOM.render(<Root />, document.getElementById('root'));

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<div id="root">
</div>