在 class render 方法中有条件地使用多个 React 组件

Question

我有一个 React class，其渲染方法包含 1 个或 3 个子组件。

如果用户已注销，则只应呈现第一个组件，如果用户已登录（或当用户登录时），则还应呈现后两个组件。

render() {
    return (
        <div className="lists-wrapper {this.data.user}">
            <List title="Featured" tiles={this.data.featured} />
            { this.data.user ?
                <List title="Faves" tiles={this.data.faves} />
                <List title="My Content" tiles={this.data.owned} />
            }
        </div>
    );
}

但是我收到以下错误：

Adjacent JSX elements must be wrapped in an enclosing tag (58:5)

我可以找到大量文档和有条件地包含一个组件或另一个组件的示例，但在这个用例中没有任何帮助。没有条件，并且添加所有三个按预期工作。

Answer 1

<List title="Featured" tiles={this.data.featured} />

您不能使用 self-closing / 标签。您必须改用 </List>。

Answer 2

您应该将相邻的 JSX 元素包裹在另一个元素中，例如 div。

此外，我会建议将渲染逻辑移到另一个函数中以使其清晰。

/*
 * A simple React component
 */
class List extends React.Component {
  render() {
    return <b>{this.props.title}</b>;
  }
}

class Application extends React.Component {
  renderSection(flag) {
      if(flag) {
        return (<div><List title="Faves"/>
              <List title="My Content"/>
                </div>);  
      }
    }
  render() {
    return (
        <div className="lists-wrapper">
            <List title="Featured" />
            { 
              this.renderSection(true)
            }
        </div>
    );
  }
}

/*
 * Render the above component into the div#app
 */
React.render(<Application />, document.getElementById('app'));

Answer 3

正如 Vivasaayi 所建议的那样，将逻辑移至另一个函数可能是个好主意。但是，如果您想将所有内容放在一个地方，它可能看起来像这样：

render() {
    return (
        <div className="lists-wrapper {this.data.user}">
            {[
                <List key="featured" title="Featured" tiles={this.data.featured} />,
                this.data.user ?
                    <List key="Faves" title="Faves" tiles={this.data.faves} /> :
                    <List key="MyContent" title="My Content" tiles={this.data.owned} />
            ]}
        </div>
    );
}

在 class render 方法中有条件地使用多个 React 组件

Conditional with multiple React Components in class render method

meteor

reactjs

react-jsx