Question

如果条件为真，我希望能够呈现HTML的某个部分。我很好奇在react render（）中设置条件if表达式的正确方法。

我在网上查了一下，发现有一种方法可以使用内联表达式来检查值是否为真，如果是，那么它将渲染剩余的元素。

我还设置了另一种方法来为要渲染的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

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

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

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

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

Answer 2

您需要使用ternary表达式

条件？ 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的文档和示例使用三元操作并将其推荐为默认模式。如果您更喜欢一种方法而不是另一种方法，那么它们都是有效的，只需坚持一个以保持一致性：）

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

2 个答案: