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函数的工作是描述组件在任何给定时间点的外观，所以你不要这样做＆＃34;除去＆＃34;或者＆＃34;改变＆＃34; 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>

根据用户反应或按钮单击替换子反应组件

1 个答案: