Question

我有一个React类，它有一个包含1或3个子组件的render方法。

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

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>
    );
}

但是我收到以下错误：

相邻的JSX元素必须包装在一个封闭的标签中（58：5）

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

Answer 1

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

您无法使用自动关闭/标记。您必须改为使用</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>
    );
}

在类渲染方法中具有多个React组件的条件

3 个答案: