Question

制作具有两个不同视图的App时应选择哪个路径。一种用于移动设备，一种用于台式机和CSS媒体查询不足以解决这种冷漠。

任何建议或指导都值得赞赏。我曾尝试进行研究，但没有运气，因此文档在哪里处理此问题，以及其他来源如何处理此问题。

我想我可以使用香草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>

Answer 2

如何为每个组件创建2种渲染方法，一种用于移动设备，一种用于桌面。

当用户进入您的应用时，获取其device info并将全局视图状态分配给移动版1和台式机2。然后，根据您的视图状态prop进行基本条件检查，渲染组件。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { view: this.props.view }; // "1" or "2"
  }

  render() {
    if (this.state.view === "1") {
      return (
        // mobile ui
      );
    } else {
      return (
        // desktop ui
      );
    }
  }
}

您可以在here上找到有关React条件渲染的更多信息。

另一个想法：您可以将应用分为2个不同的顶级组件。如果您使用的不是react-router ：)，则在获取用户的设备信息后，可以像这样重定向它们：

app.js

<Switch>
      <Route path="/" name="Redirect" component={Redirect}/>
      <Route path="/mobile" name="Redirect" component={Mobile}/>
      <Route path="/desktop" name="Redirect" component={Desktop}/>
</Switch>

重定向组件

render() {
  if (getDeviceInfo === "1")
    return (<Redirect to={"/mobile"}/>);
  else
    return (<Redirect to={"/desktop"}/>);
}

通过这种方式，您无需为组件保留2个不同的ui。

使用React并使用相同组件的不同HTML结构的方法

2 个答案: