Question

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

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

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

Answer 1

将它们放入一个数组中（也指定键）：

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

Answer 2

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

检查此简短解决方案：

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

Answer 3

您可以利用short hand fragments返回包含Logical '&&' Operator的子项列表以进行条件渲染。干净整洁！ ?

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

Answer 4

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

例如：-

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

Answer 5

2020年更新

我已经从答案中找出了每个解决方案。这是常规React的细分：

1。反应片段

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

2。查看

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

3。 div

实际可行的方法是将HTML放入Div

Answer 6

在类似情况下（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>
    );
  }
}

Answer 7

这个对我有用。

<反应片段> ……..

Answer 8

如果您使用 <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>

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

8 个答案: