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

Posted 2023-02-21

【中文标题】React - 表达式必须有一个父元素？

【英文标题】：React - expressions must have one parent element?

【发布时间】：2018-07-30 21:38:30

【问题描述】：

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

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

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

【参考方案1】：

如果你使用<Switch>，那么使用<div> 和<React.Fragment> 包裹你的路由会破坏它。

我喜欢<ProtectedRoute> 组件的想法：

import  Component  from 'react';
import  Redirect, Route  from 'react-router-dom';

class ProtectedRoute extends Component<any> 
  render() 
    const  component: Component, allow, ...props  = this.props;
    if (!allow) 
      return <Redirect to= pathname: '/signin'  />;
    
    return <Route ...props render=(props) => <Component ...props /> />;
  


export default ProtectedRoute;

然后像下面这样使用它：

<Router history=history>
  <Route path="/" component=App>
    <Route path="home" component=Home />
    <Route path="about" component=About />

    <ProtectedRoute path="inbox" component=Inbox allow=this.props.mail />
    <ProtectedRoute path="contacts" component=Contacts allow=this.props.mail />

  </Route>
</Router>

【参考方案2】：

这个对我有用。

……..

【参考方案3】：

2020 年更新

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

1.反应片段

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

2。查看

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

3.分区

真正起作用的是将 html 放入 Div

【参考方案4】：

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

例如：-

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

【参考方案5】：

您必须使用片段标签，例如（div，，...）。

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

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

【参考方案6】：

您可以利用 short hand fragments 返回子列表以及 Logical '&&' Operator 进行条件渲染。又好又干净！ ?

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

【参考方案7】：

在类似情况下遇到同样的错误（React Native）。

export default class App extends React.Component 
  render() 
    return (
      <StatusBar barStyle="default" />
      <AppContainer />
    );
  

如错误提示所示，JSX 表达式需要有一个父元素，因此将返回表达式中的元素与父元素一起包装。添加了flex: 1 样式以允许<View> 元素假定整个屏幕的高度。

export default class App extends React.Component 
  render() 
    return (
      <View style=flex: 1>
        <StatusBar barStyle="default" />
        <AppContainer />
      </View>
    );
  

【讨论】：

这很好用，谢谢。值得注意的是，它需要“从'react-view-component/lib/View'导入视图；”

补充一点，如果我们说的是普通的 React，那么你只需要将上面的代码包装在一个 div 中以防止出现此错误。示例：export default class App extends React.Component render() return ( <div> <StatusBar barStyle="default" /> <AppContainer /> </div> );

【参考方案8】：

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

 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> 希望这会有所帮助

很好！！我有这个错误并且不明白为什么。这是由于您假设返回元素的方式。感谢您指点片段！

太棒了！我有这个问题困扰了我一段时间。感谢分享！

很棒。