如何在 React render() 中正确设置条件表达式 (if)

Question

如果条件为真，我希望能够渲染 HTML 的某个部分。我很好奇在 react render().

中设置条件 if 表达式的正确方法

我在网上查了一下，找到了一种使用内联表达式来检查值是否为 true 的方法，如果是，那么它将呈现剩余的元素。

我还设置了另一种方法来为要渲染的 html 创建变量。

问题：

我无法将两个 td 标签包装为一个标签来满足条件。看起来这需要每个 td 标签完成。

有没有办法围绕这两个标签执行此操作，或者是否需要在它们周围设置另一个元素？

我认为这也可以使用 => 函数来设置。

内联 render() 表达式的代码：

render() {

    // get the data from the JSON entity for each attribute
    var tdsForObject = this.props.jsonAttributes.map(jsonAttribute =>
        <td>{this.props.object.entity[jsonAttribute]}</td>
    );

    return (
      <tbody>
        <tr>
          {tdsForObject}
          {this.props.objectTypeEditable &&
            <td>
              <UpdateDialog object={this.props.object}
                      objectName={this.props.objectName}
                      attributes={this.props.attributes}
                      onUpdate={this.props.onUpdate}/>
            </td>
          }
          {this.props.objectTypeEditable &&
              <td>
              <button onClick={this.handleDelete}>Delete</button>
            </td>
          }
        </tr>
      </tbody>
    )
  }

在 render() 之外创建按钮的代码

render() {

    // get the data from the JSON entity for each attribute
    var tdsForObject = this.props.jsonAttributes.map(jsonAttribute =>
        <td>{this.props.object.entity[jsonAttribute]}</td>
    );

    var updateButton;
    var deleteButton;

    // if the object can be edited create the update and delete buttons
    if (this.props.objectTypeEditable) {
      updateButton = (
        <td>
          <UpdateDialog object={this.props.object}
                  objectName={this.props.objectName}
                  attributes={this.props.attributes}
                  onUpdate={this.props.onUpdate}/>
        </td>
      );

      deleteButton = (
        <td>
          <button onClick={this.handleDelete}>Delete</button>
        </td>
      );
    }

    return (
      <tbody>
        <tr>
          {tdsForObject}
          {updateButton}
          {deleteButton}
        </tr>
      </tbody>
    )
  }

Answer 1

您需要使用 ternary 表达式

condition ? expr1 : expr2

render() {

    // get the data from the JSON entity for each attribute
    var tdsForObject = this.props.jsonAttributes.map(jsonAttribute =>
        <td>{this.props.object.entity[jsonAttribute]}</td>
    );

    return (
      <tbody>
        <tr>
          {tdsForObject}
          { this.props.objectTypeEditable
            ? <td>
                <UpdateDialog object={this.props.object}
                      objectName={this.props.objectName}
                      attributes={this.props.attributes}
                      onUpdate={this.props.onUpdate}/>
              </td>
            : null
          }
          { this.props.objectTypeEditable 
            ? <td>
                <button onClick={this.handleDelete}>Delete</button>
              </td>
            : null
          }
        </tr>
      </tbody>
    )
  }

不能使用多个内联。 React 的文档和示例使用三元操作并推荐它作为默认模式。如果你更喜欢一种方法而不是另一种，那很好，它们都是有效的，只是为了一致性而坚持使用一种方法:)

Answer 2

JSX 不允许您 return 2 个并排元素。它只能 return 1 个元素。所以是的，您可以将这 2 个包装在一个元素中，并使用与现在相同的验证。

{this.props.objectTypeEditable &&
    <div class="wrapper">
        <td>
            [...]
        </td>
        <td>
            [...]
        </td>
    </div>
}

您还可以使用 inline self invoked function 和 return JSX 元素数组。 （渲染方法会自动循环并渲染它们）。在这里，我使用 ES6 箭头函数直接绑定 this 引用，但它可能可以使用普通函数并像这样手动绑定它 .bind(this)

{(() => {
    let elements = [];
    if(this.props.objectTypeEditable) {
        // push td elements in array
    }
    return elements;
})()}

如何在 React render() 中正确设置条件表达式 (if)

How to correctly setup a conditional expression (if) in a React render()

javascript

reactjs

react-jsx

es6-promise