Question

我正在尝试为当前已经设置条件的两个组件设置 additional 条件渲染：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="video-iframe-div" class="v-iframe-div-off" onclick="closesubpage(event)">
    <iframe src="" id="video-iframe" class="v-iframe-off" name="i-video">
    </iframe>
</div>

在保留我已设置的原始条件的同时，如何在不同且不相关的条件下向这两个组件添加另一个条件？谢谢。

Answer 1

{!this.state.isEdit && (someSecondCondition) &&
  <Todo
    onCompleted={this.handleCompleted}
    todos={this.state.todos}
    onEdit={this.handleEdit}
    onDelete={this.handleDelete}
  />
}

{this.state.isEdit && (someWeirdCondition || someOtherWeirdCondition) &&
  <Useredit
    onCompleted={this.handleCompleted}
    onEdit={this.handleEdit}
    value={this.state.editText} 
    onChange={this.handleEditChange} 
    onChangeSelect={this.handleSelectChange}
    todos={this.state.todos}
    onDelete={this.handleDelete}
    onSave={this.handleSave}
  /> 
}

只需替换someSecondCondition等以适合您的情况。有关更多信息，您应该了解&&和||运算符的工作原理，如果为true和false，则将呈现代码的哪一部分。

更好的是，要提高可伸缩性/可读性/可维护性，请将逻辑移到另一种方法中。

handleViews = () => {
  if(!this.state.isEdit) {
    return (
      <Todo
        onCompleted={this.handleCompleted}
        todos={this.state.todos}
        onEdit={this.handleEdit}
        onDelete={this.handleDelete}
      />
    )
  } else if(this.state.isEdit) {
    return (
      <Useredit
        onCompleted={this.handleCompleted}
        onEdit={this.handleEdit}
        value={this.state.editText} 
        onChange={this.handleEditChange} 
        onChangeSelect={this.handleSelectChange}
        todos={this.state.todos}
        onDelete={this.handleDelete}
        onSave={this.handleSave}

      /> 
    );
  }
}


render() {
  return <View>{this.handleViews()}</View>
}

条件渲染为React中的一个条件提供更多条件？

1 个答案: