reactjs – React – 表达式必须有一个父元素？

发布时间：2020-12-15 20:53:13 所属栏目：百科来源：网络整理

导读：我对React比较陌生,我想知道这里的标准是什么. 想象一下,我有一个像这样的反应路由器： Router history={history} Route path="/" component={App} Route path="home component={Home} / Route path="about" component={About} / Route path="inbox" compone

我对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返回错误：

expressions must have one parent element.

我不想在这里使用多个ifs.什么是首选的React处理方式？

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

{ 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 }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!