我是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,因此一种理智的做法如下所示:
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版本,您也可以这样尝试 React.Fragment :
React.Fragment
{ if.this.props.mail ? <React.Fragment> <Route path="inbox" component={Inbox} />, <Route path="contacts" component={Contacts} /> </React.Fragment> : null }