Javascript 如何以阶梯形式管理图元的可见性

我有一张有步骤的表格。 我希望在用户通过一个步骤后显示其他元素。 一次只能看到一个步骤

我试图使用一个布尔状态变量，但没有任何运气。所有步骤在通过一个步骤后显示

return (
  <UserConsumer>
    {value => {
      //const {dispatch} = value;
      return (
        <div>
          <Animation pose={visible ? 'visible' : 'hidden'}>
            <div className="card col-md-12 mb-4">
              <div className="card-body">
                <form onSubmit={this.changeVisibility}>
                  <div className="form-group">
                    <Text text="Adınız ve Soyadınız" />
                  </div>
                  <div className="form-group">
                    <Input ph="Ad ve Soyad" />
                  </div>
                  <Button clickText="İleri" />
                </form>
              </div>
            </div>
          </Animation>

          <Animation pose={!visible ? 'visible' : 'hidden'}>
            {queue.push(
              <div className="card col-md-12 mb-4">
                <div className="card-body">
                  <form onSubmit={this.changeVisibility}>
                    <div className="form-group">
                      <Text text="E-mail adresiniz" />
                    </div>
                    <div className="form-group">
                      <Input ph="E-mail" />
                    </div>
                    <Button clickText="İleri" />
                  </form>
                </div>
              </div>,
            )}
          </Animation>
        </div>
      )
    }}
  </UserConsumer>
)

返回(
{value=>{
//const{dispatch}=值；
返回(
{queue.push(
,
)}
)
}}
)

我的回答基于您的评论，即它隐藏了第一个数组，但不显示第二个，这是因为您正在调用push，它将返回新数组的长度。因此，它将显示一个数字，而不是第二个动画组件中的元素，修复：

return (
  <UserConsumer>
    {value => {
      //const {dispatch} = value;
      return (
        <div>
          <Animation pose={visible ? 'visible' : 'hidden'}>
            <div className="card col-md-12 mb-4">
              <div className="card-body">
                <form onSubmit={this.changeVisibility}>
                  <div className="form-group">
                    <Text text="Adınız ve Soyadınız" />
                  </div>
                  <div className="form-group">
                    <Input ph="Ad ve Soyad" />
                  </div>
                  <Button clickText="İleri" />
                </form>
              </div>
            </div>
          </Animation>

          <Animation pose={!visible ? 'visible' : 'hidden'}>
              <div className="card col-md-12 mb-4">
                <div className="card-body">
                  <form onSubmit={this.changeVisibility}>
                    <div className="form-group">
                      <Text text="E-mail adresiniz" />
                    </div>
                    <div className="form-group">
                      <Input ph="E-mail" />
                    </div>
                    <Button clickText="İleri" />
                  </form>
                </div>
              </div>
          </Animation>
        </div>
      )
    }}
  </UserConsumer>
)

返回(
{value=>{
//const{dispatch}=值；
返回(
)
}}
)

视图中的当前输出是什么？仅显示第一个div。如果单击按钮，则首先隐藏，但不显示第二个div。为什么要执行

队列。推送（

在第二个动画组件中，为什么不作为第一个渲染？