javascript - 子组件的 setState 仅在被调用时

Question

我有一个父组件，我已经像这样在其 HTML 中调用了子组件。

render() {
   <EditBank
                deal={dealDetailData && dealDetailData.id}
                open={editBankModalStatus}
                headerText={"Edit Bank Account"}
                getInvestmentOfferingDetailsById = {() =>this.props.getInvestmentOfferingDetailsById({
                  id: this.props.match.params.id
                })}
                bankDetail={bankDetails}
                toggleEditModal={() => this.handleEditModal("editBankModalStatus", {})}
            />
}

EditBank 组件是一种模式，仅在editBankModalStatus为 true 时显示，并且在单击按钮时设置为 true。

现在我只想在单击按钮并且将任何 bankDetails 传递给它时设置 EditBank 的状态。
我已经厌倦了 componentDidMount 生命周期钩子，但它仅在组件渲染时更新。

当 EditBank 组件仅显示在屏幕上时，我想更新它的状态。任何帮助表示赞赏。

标签： javascriptreactjsreact-lifecycle-hooks

Answer 1

尝试这样做：

render(){
  return (
    <div>
      {editBankModalStatus === true &&
            <EditBank
                deal={dealDetailData && dealDetailData.id}
                open={editBankModalStatus}
                headerText={"Edit Bank Account"}
                getInvestmentOfferingDetailsById = {() =>this.props.getInvestmentOfferingDetailsById({
                  id: this.props.match.params.id
                })}
                bankDetail={bankDetails}
                toggleEditModal={() => this.handleEditModal("editBankModalStatus", {})}
            />
      }
    </div>
  );
}

所以 EditBank 只有在editBankModalStatus为真时才会显示。