Question

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

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.

Answer 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，则为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}
);

但我个人更喜欢以前的解决方案。

Answer 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

有条件地反应JSX

2 个答案: