reactjs React - 表达式必须有一个父元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48886726/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React - expressions must have one parent element?
提问by Wordpressor
I'm relatively new to React and I'm wondering what's the standard here.
我对 React 比较陌生，我想知道这里的标准是什么。
Imagine I have a react-router like this one:
想象一下，我有一个这样的反应路由器：
<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>
And now I want to remove two routes if prop.mailis set to false, so a sane way of doing that would look like this:
现在我想删除两条路由 ifprop.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>
But there are 2 routes and React returns error:
但是有 2 条路线，React 返回错误：
expressions must have one parent element.
表达式必须有一个父元素。
I don't want to use multiple ifs here. What's the preferred React way of handling this?
我不想在这里使用多个 if。处理此问题的首选 React 方式是什么？
回答by Mayank Shukla
Put them in an array (assign the keys also):
将它们放在一个数组中（也分配键）：
{ if.this.props.mail ?
[
<Route key={0} path="inbox" component={Inbox} />,
<Route key={1} path="contacts" component={Contacts} />
]
: null }
With latest React version, you can try React.Fragmentalso, like this:
使用最新的 React 版本，您也可以尝试React.Fragment，如下所示：
{ if.this.props.mail ?
<React.Fragment>
<Route path="inbox" component={Inbox} />,
<Route path="contacts" component={Contacts} />
</React.Fragment>
: null }
回答by Eoin Traynor
You can leverage short hand fragmentsto return a list of children along with Logical '&&' Operatorfor conditional rendering. Nice and clean!
您可以利用简写片段返回子列表以及逻辑“&&”运算符以进行条件渲染。漂亮干净！
{this.props.mail &&
<>
<Route path="inbox" component={Inbox} />,
<Route path="contacts" component={Contacts} />
</>
}
回答by Jens Gerntholtz
Faced the same error in a similar situation (React Native).
在类似情况下面临同样的错误（React Native）。
export default class App extends React.Component {
render() {
return (
<StatusBar barStyle="default" />
<AppContainer />
);
}
}
As indicated in the error prompt the JSX expression requires to have one parent element, hence wrap the elements in the return expression with a parent element. The flex: 1style was added to allow the <View>element assume the height of the entire screen.
如错误提示中所示，JSX 表达式需要有一个父元素，因此用父元素将返回表达式中的元素包装起来。该flex: 1加入的风格，使<View>元素呈现整个屏幕的高度。
export default class App extends React.Component {
render() {
return (
<View style={{flex: 1}}>
<StatusBar barStyle="default" />
<AppContainer />
</View>
);
}
}
回答by Alexandre Soria
You must been use a fragment tag e.g(div, <>,...).
您必须使用片段标签，例如(div, <>,...)。
Check this short solution:
检查这个简短的解决方案：
{ if.this.props.mail ?
<>
<Route path="inbox" component={Inbox} />
<Route path="contacts" component={Contacts} />
</>
: null }
回答by m2j96
just try enclosing the code after the return statement in an element like <div>....code </div>,etc.
只需尝试将 return 语句之后的代码包含在诸如<div>....code </div>等元素中。
eg:-
例如：-
const Div =()=>{
return
<div>
<Button name="Save" ></Button>
<Button name="Edit"></Button>
<Button name="Cancel"></Button>
</div>}
