javascript - 根据用户交互或按钮单击将子 react 组件替换为另一个组件

Question

我在react中创建了 Bootstrap 模式组件。

        var carModal=<Modal handleHideModal={this.handleHideCarModal}
                onConfirm={this.confirmCarModal}
                title="Car"
                id="CarModal">
                <CarStructure callbackParent={this.showCarOptionsUpdate}/>
                </Modal>

在汽车结构中，我有一个基于按钮单击的表单，我想删除 <CarStructure>模态中的子组件 carModal并用具有不同表单结构的另一个组件更新它。如何替换<CarStructure>另一个组件具有完全不同的用户界面和选项？

Answer 1

请记住，React 组件的 render 的工作功能是描述组件在任何给定时间点的外观，因此您不必“删除”或“更改”DOM 部分，而是描述它们何时应该更改>他们自己。因此，您需要以 <Modal> 的内部组件为基础处于某种状态(在父组件的整个生命周期中可能会发生变化)。像这样的事情可能会成功:

var carModalBody;
if (this.state.something) {
  var carModalBody = <CarStructure callbackParent={this.showCarOptionsUpdate} />;
} else {
  var carModalBody = <SomeOtherComponent />;
}

var carModal = <Modal handleHideModal={this.handleHideCarModal}
                      onConfirm={this.confirmCarModal}
                      title="Car"
                      id="CarModal">
                        {carModalBody}
               </Modal>