javascript - 使用 React 和使用相同组件的不同 HTML 结构的方法

Question

我应该选择哪条路径来制作一个应该有两个不同 View 的应用程序。一种用于移动设备，一种用于桌面和 CSS 媒体查询不足以解决冷漠问题。

如有任何建议或指导，我们将不胜感激。我曾尝试研究但没有成功，所以文档在哪里处理这个问题，以及其他来源是如何处理这个问题的。

我想我可以使用 vanilla JS 并直接操作 DOM，但这几乎剥夺了 React 的目的。

Answer 1

您是否尝试过像 react-device-detect 这样的东西？

https://www.npmjs.com/package/react-device-detect

你可以像这样有两种不同的布局:

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