有条件地反应渲染JSX [英] react conditionally render JSX

问题描述

在这里，我要在App类内创建局部变量persons，然后根据某些条件为其分配JSX，然后在render()方法内传递它({persons}).

Here I'm creating a local variable persons inside the App class then assigning a JSX to it based on some condition and then passing it({persons}) inside render() method.

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.

I'm getting a compilation error at let showPersons = null;. In VS code if I hover over the red marked line of let keyword it says: [js] Unexpected token. A constructor, method, accessor, or property was expected.

推荐答案

您可以执行Carlo在他的帖子中建议的操作.但是，您可能根本不需要persons变量.因此，如果您不需要在应用中的其他位置使用该变量，请考虑以下解决方案:

You can do what Carlo suggests in his post. However, you probably don't need the persons variable at all. So if you don't need that variable elsewhere in your app, consider the following solution:

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

以上语法称为短路评估:

当从左到右评估逻辑表达式时，将对它们进行测试以了解可能的短路".使用以下规则进行评估:

As logical expressions are evaluated left to right, they are tested for possible "short-circuit" evaluation using the following rules:

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

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

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

In your app, this means:

• 如果this.state.showPerson为false，则为false && JSX = false，不呈现任何内容.
• 如果this.state.showPerson为true，则为true && JSX = true，它将呈现您的JSX.

• If this.state.showPerson is false, then false && JSX = false, which renders nothing.
• If this.state.showPerson is true, then true && JSX = true, which renders your JSX.

或者，您也可以使用三元表达式:

condition ? expr1 : expr2

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

If condition is true, the operator returns the value of expr1; otherwise, it returns the value of 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}
);

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

But I personally prefer the former solution.

这篇关于有条件地反应渲染JSX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！