React：一个组件的多个 JSX 模板答案

【问题标题】：React: multiple JSX templates for one single componentReact：一个组件的多个 JSX 模板
【发布时间】：2019-09-07 13:55:39
【问题描述】：

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

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

【问题讨论】：

这当然是可能的，可能是向我们展示一些示例的想法。但是让您的网站具有响应性可以消除这种需求。
@Keith 响应式布局与提供特定移动布局不同。当您必须处理复杂的 UI（IE，在 ERP 软件中）时，需要针对移动设备的特定布局。此外，通过正确进行代码拆分，您可以向移动设备提供更轻量级的代码。
@MosèRaguzzini 我确信移动特定编码有充分的理由，但在大多数情况下，这不是问题的解决方案。例如，用户不应该因为网页内容而受到惩罚，因为他们在移动设备上，这是糟糕的 UI 设计，不幸的是，这样做太频繁了。有很多网站我最终点击了桌面版本，因为移动端缺少功能/内容，这很糟糕。通过响应式设计，它有助于以不同的方式关注设计，并且不太可能惩罚您的移动用户。
@jemlifathi 尝试添加一些代码，所以我可以告诉你怎么做。但也许关闭这个问题并添加一个包含代码/更多信息的新问题。
@jemlifathi 是的，MobileUsersCard 和 WebUsersCard 都是同一个组件，一种解决方案可能是将您的逻辑移到组件内部，我的意思是：在父组件中，只需渲染相同的 UsersCard 两次传递给它新的道具，即 isMobile（在一种情况下为真，在另一种情况下为假）和您的 UserCard 组件内部，根据这些道具，您可以呈现不同的东西

标签： javascript reactjs redux react-redux jsx

【解决方案1】：

其他答案依赖于屏幕尺寸（可能导致误报），此解决方案依赖于检测移动设备

您可以使用react-device-detect

<BrowserView>
    <h1> This is rendered only in browser </h1>
</BrowserView>
<MobileView>
    <h1> This is rendered only on mobile </h1>
</MobileView>

这可以在<Switch /> 中包装单个视图或整个路由集

【讨论】：

【解决方案2】：

尝试响应式库。

你可以根据 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>
);

【讨论】：

这不是响应式问题，OP 必须检测移动设备

【解决方案3】：

我正在使用 Semantic-ui React，并且有一个响应式组件，您可以渲染特定于广告的组件并指定分辨率：例如

<Responsive as={Grid} {...Responsive.onlyMobile} columns='equal' >
   //stuff for mobile
</Responsive>

<Responsive as={Grid} {...Responsive.onlyTablet} columns='equal' >
   //stuff for tablet
</Responsive>

【讨论】：

OP 需要检测移动设备，Responsive.onlyMobile 和 Responsive.onlyTablet 是定义响应行为的对象，而不是基于设备的行为
@MosèRaguzzini “我正面临着拥有相同组件的移动版和网页版的问题”你不理解
手机版和网页版不是“响应版”。我可以拥有一台具有桌面屏幕大小的移动设备。但仍然是移动设备。响应式就是关于 maxwith/minwidth 媒体查询

【解决方案4】：

我们可以使用 Rebass 库来构建移动、平板和桌面的响应组件。除此之外，我们还可以使用 styled component，这样我们就可以轻松地根据自己的 CSS 设置组件的样式。

https://rebassjs.org/

https://www.styled-components.com/

【讨论】：

【解决方案5】：

你可以使用 Bootstrap 之类的东西。如果这不能解决问题。然后你可以有一些标志状态，并有两个函数返回不同的 JSX 标记。您必须编写用于检测移动设备的逻辑。

【讨论】：