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

我是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>

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

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

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

回答:

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

{ if.this.props.mail ? 

[

<Route key={0} path="inbox" component={Inbox} />,

<Route key={1} path="contacts" component={Contacts} />

]

: null }

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

{ if.this.props.mail ? 

<React.Fragment>

<Route path="inbox" component={Inbox} />,

<Route path="contacts" component={Contacts} />

</React.Fragment>

: null }

以上是 React-表达式必须具有一个父元素? 的全部内容, 来源链接: utcz.com/qa/435515.html

回到顶部