有条件地渲染 JSX答案

【问题标题】：react conditionally render JSX有条件地渲染 JSX
【发布时间】：2018-06-30 06:00:33
【问题描述】：

在这里，我在App 类中创建了一个局部变量persons，然后根据某些条件为其分配一个JSX，然后在render() 方法中传递它（{persons}）。

let persons = null;

if (this.state.showPerson) {
 persons = (
<div>
  <RenderPerson 
    name={this.state.customers[0].name} 
    age={this.state.customers[0].age}  />

  <RenderPerson 
    name={this.state.agents[1].name}
    age={this.state.agents[1].age} />

</div>
 );
}

let showPersons = null; 出现编译错误。在 VS 代码中，如果我将鼠标悬停在 let 关键字的红色标记行上，它会显示：[js] Unexpected token. A constructor, method, accessor, or property was expected.

【问题讨论】：

标签： reactjs ecmascript-6

【解决方案1】：

您可以按照 Carlo 在他的帖子中的建议进行操作。但是，您可能根本不需要 persons 变量。因此，如果您在应用的其他地方不需要该变量，请考虑以下解决方案：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showPerson: false
    }
  }
  render() {
    return (
      {this.state.showPerson && <div>
        <RenderPerson 
          name={this.state.customers[0].name} 
          age={this.state.customers[0].age}
        />
        <RenderPerson 
          name={this.state.agents[1].name}
          age={this.state.agents[1].age}
        />
      </div>}
    );
  }
}

上面的语法称为短路评估：

由于逻辑表达式是从左到右评估的，因此使用以下规则测试它们是否存在可能的“短路”评估：

false && (anything) is short-circuit evaluated to false.

true || (anything) is short-circuit evaluated to true.

在您的应用中，这意味着：

如果this.state.showPerson 为假，则false && JSX = false 不渲染。
如果this.state.showPerson 为真，那么true && JSX = true 将呈现您的JSX。

或者，您也可以使用ternary expression：

condition ? expr1 : expr2

如果condition为真，则运算符返回expr1的值；否则返回expr2的值

在您的应用中将是：

return (
  {this.state.showPerson ? <div>
    <RenderPerson 
      name={this.state.customers[0].name} 
      age={this.state.customers[0].age}
    />
    <RenderPerson 
      name={this.state.agents[1].name}
      age={this.state.agents[1].age}
    />
  </div> : null}
);

但我个人更喜欢前一种解决方案。

【讨论】：

好吧，我之前已经用三元运算符尝试过这种方法，它工作得很好。我们的想法不是每次添加新的 JSX 模板时都让 render() 看起来如此丑陋和令人生畏，而是使用一个变量或任何可以在 render() 中引用的东西。
@izengod，那么也许您可以使用完全相同的代码，只需将其移动到一个函数中并在 render() 中调用它？
我尝试了相同的代码，除了按照建议在构造函数中启动 person 变量。但是这次 if() 中的 this.state.showPerson 给出了一个错误（不知何故无法访问）。
@izengod 你不能在渲染的返回中使用 ifs。您必须按照我的建议使用三元或短路。否则在返回之前使用它。
太棒了！在内部渲染之前使用条件行为它就像魅力一样工作:)

【解决方案2】：

你可能正在做这样的事情

class App extends React.Component {
  // ...
  let persons = null;
  // ...
}

你应该这样做

class App extends React.Component {
  constructor(props) {
    super(props);
    this.persons = null;
  }
}

在此处查看有关类语法的更多信息https://babeljs.io/learn-es2015/#classes

【讨论】：