javascript - react : multiple JSX templates for one single component

Question

我是一个 React 新手，我正在开发一个最初使用 create-react-app 模块创建的 React 应用程序，我需要它适应移动设备(浏览器)......为此，我面临着一个问题同一组件的移动版和网络版。 我想知道是否有一种方法可以通过仅使用 2 个不同的 JSX 渲染模板并保持相同的代码库来优化两个独立组件的流程。我的意思是根据设备加载特定的 JSX 并将其放置在渲染方法中。

任何帮助将不胜感激 提前致谢

Answer 1

尝试 react 响应库。

您可以根据mediaQuery渲染不同的组件

lib reference

import MediaQuery from 'react-responsive';

const Example = () => (
  <div>
    <div>Device Test!</div>
    <MediaQuery query="(min-device-width: 1224px)">
      <div>You are a desktop or laptop</div>
      <MediaQuery query="(min-device-width: 1824px)">
        <div>You also have a huge screen</div>
      </MediaQuery>
      <MediaQuery query="(max-width: 1224px)">
        <div>You are sized like a tablet or mobile phone though</div>
      </MediaQuery>
    </MediaQuery>
    <MediaQuery query="(max-device-width: 1224px)">
      <div>You are a tablet or mobile phone</div>
    </MediaQuery>
    <MediaQuery query="(orientation: portrait)">
      <div>You are portrait</div>
    </MediaQuery>
    <MediaQuery query="(orientation: landscape)">
      <div>You are landscape</div>
    </MediaQuery>
    <MediaQuery query="(min-resolution: 2dppx)">
      <div>You are retina</div>
    </MediaQuery>
  </div>
);