为什么我会收到错误“表达式必须有一个父元素”,我该如何解决?

新手上路,请多包涵

我对 React 比较陌生,我想知道这里的标准是什么。

想象一下,我有一个像这样的反应路由器:

 <Router history={history}>
    <Route path="/" component={App}>
      <Route path="home component={Home} />
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox} />
      <Route path="contacts" component={Contacts} />
    </Route>
</Router>

现在,如果 prop.mail 设置为 false ,我想删除两条路线,所以这样做的明智方法如下所示:

 <Router history={history}>
      <Route path="/" component={App}>
        <Route path="home component={Home} />
        <Route path="about" component={About} />

        { if.this.props.mail ?
          <Route path="inbox" component={Inbox} />
          <Route path="contacts" component={Contacts} />
        : null }

      </Route>
 </Router>

但是有 2 条路线,React 返回错误:

表达式必须有一个父元素。

我不想在这里使用多个 if。处理此问题的首选 React 方式是什么?

原文由 Wordpressor 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 646
2 个回答

将它们放在一个数组中(也分配键):

 { if.this.props.mail ?
    [
        <Route key={0} path="inbox" component={Inbox} />,
        <Route key={1} path="contacts" component={Contacts} />
    ]
: null }

使用最新的 React 版本,您可以尝试 React.Fragment 也可以,像这样:

 { if.this.props.mail ?
    <React.Fragment>
        <Route path="inbox" component={Inbox} />,
        <Route path="contacts" component={Contacts} />
    </React.Fragment>
: null }

原文由 Mayank Shukla 发布,翻译遵循 CC BY-SA 4.0 许可协议

您可以利用 简写片段 返回子项列表以及用于条件渲染 的逻辑“&&”运算符。漂亮干净! 😄

 {this.props.mail &&
  <>
    <Route path="inbox" component={Inbox} />,
    <Route path="contacts" component={Contacts} />
  </>
}

原文由 Eoin Traynor 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进