通过子组件显示隐藏组件

Question

我在父组件中有两个步骤组件，其 state 是：

state = {
        isStep1Active: true,
        isStep2Active: false,
}

这是在 Parent 的构造函数中设置的初始 state：

this.state = {
        isStep1Active: true,
        isStep2Active: false,
}

在构造函数本身中，我通过函数绑定了这个 state，以便我可以更改子组件中的 state：

 this.showStep2Func = this.showStep2Func.bind(this);
 this.hideStep1Func = this.hideStep1Func.bind(this);

该方法将被发送到父组件中声明的子组件：

showStep2Func() {
    this.setState({
        isStep2Active: true
    });
}
hideStep1Func() {
    this.setState({
        isStep1Active: false
    });
}

这是父组件中存在的两个组件的 div：

<div className="tab-content">
                            {
                                this.state.isStep1Active ?
                                    <div className="tab-pane active" role="tabpanel" id="step1">
                                        <Merchant1CreateAccountForm hideStep1={this.hideStep1Func} showStep2={this.showStep2Func} />
                                    </div>
                                    : null
                            }
                            {
                                this.state.isStep2Active ?
                                    <div className="tab-pane" role="tabpanel" id="step2">
                                        <Merchant2EmailVerificationForm/>
                                    </div>
                                    : null
                            }
</div>

基于带有 stepNumber 的响应，我希望隐藏和显示第一个子组件中的组件。（我的子组件使用钩子，虽然这只是语法）我希望做这样的事情：

if (stepNumber==="2"){
       props.showStep2();
       props.hideStep1();
       }

我该如何重新渲染我的父组件？ 上面的代码不会重新渲染父组件隐藏和显示相应的组件。

Answer 1

由于某种原因，这在 npm 启动后起作用。 不知道为什么它以前不起作用。