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

Question

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

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

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

Answer 1

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

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

Answer 2

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

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

Answer 3

您必须使用片段标签，例如(div, <>,...)。

检查这个简短的解决方案：

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

Answer 4

只需尝试将 return 语句之后的代码包含在诸如<div>....code </div>等元素中。

例如：-

const Div =()=>{
           return
            <div>
              <Button name="Save" ></Button>
              <Button name="Edit"></Button>
              <Button name="Cancel"></Button>  
            </div>}