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

IT技术 reactjs react-router
2021-04-02 01:12:33

我对 React 比较陌生，我想知道这里的标准是什么。

想象一下，我有一个像这样的react-router：

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

现在我想删除两条路由 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>

但是有 2 条路线，React 返回错误：

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

我不想在这里使用多个 if。处理此问题的首选 React 方式是什么？

6个回答

将它们放在一个数组中（也分配键）：

{ 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 }
对于那些在 react native 中遇到相同错误的人......你可能在三元中有多个元素是这样的： { this.state.isEnabled ? <Text>Hello World</Text><Text>I am here</Text> : <Text>Hello World</Text><Text>I am on my way</Text> } 所以你需要做的就是将元素放入一个{this.state.isEnabled ? <View><Text>Hello World</Text><Text>I am here</Text></View> : <View><Text>Hello World</Text><Text>I am on my way</Text></View> } 希望这会有所 帮助
2021-05-24 01:12:33
谢谢！不知道为什么，但数组从来没有对我有用 - 它总是返回相同的错误。
2021-05-26 01:12:33
好的 ！！我有这个错误，不明白为什么。这是由于您假设返回元素的方式。感谢您指出片段！
2021-05-26 01:12:33
<React.Fragment> 很棒。
2021-06-15 01:12:33
惊人的！我遇到了这个困扰我一段时间的问题。感谢分享！
2021-06-17 01:12:33

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

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

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

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

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

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

例如：-

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

2020年更新

我已经从答案中检查了每个解决方案。以下是常规 React 的细分：

1.react片段

当我想使用它一次而不添加额外的 DOM 节点时 - 它起作用了。当我尝试使用第二个 React.Fragment 时，出现了非常严重的错误。无法修复它。

2. 查看

我无法正确导入 View。我不知道这是否仅适用于 Reactjs 或 Native，但这不起作用

3. 分区

真正有效的是将 HTML 放入 Div

其它你可能感兴趣的问题
上一篇动态添加图片 React Webpack 下一篇将多个参数传递给 React 中的事件处理程序