javascript - 在 React 中为多个条件提供更多条件渲染？

Question

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

{!this.state.isEdit &&
   <Todo
     onCompleted={this.handleCompleted}
     todos={this.state.todos}
     onEdit={this.handleEdit}
     onDelete={this.handleDelete}

   />
   }

   {this.state.isEdit &&
    <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}

      /> 
    }

如何在保留我设置的原始条件的同时为这两个组件添加另一个条件以获得不同且不相关的条件？谢谢你。

标签： javascriptreactjs

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等以适合您的情况。有关更多信息，您应该了解&&和||操作符如何工作，以及在真假的情况下，将呈现代码的哪一部分。

更好的是，为了提高可扩展性/可读性/可维护性，将您的逻辑删除到另一种方法中。

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