Javascript 从其他组件的事件创建组件

我是个新手，在理解组件的生命周期时遇到了一些困难

我现在有一个导航栏和导航按钮组件，我希望每个导航按钮触发不同的东西。我不想更改页面，我想在同一页面中显示更多组件

我有我的按钮设置，所以我可以做下面的

<NavButton text="Searches" onClick={
    function () {
        console.log('test');
    }
} />
</div>

在这种情况下，我是否可以说，在我的DOM中的其他位置创建/显示不同的组件？

您可以：

• 给出组件状态，并添加showdetail标志（在

  getInitialState（）

  中设置为false）
• 单击更新状态（

  setState（{showDetail:true}）

  ）
• 根据状态进行渲染

渲染结果可能如下所示：

render() {
  return (
    <NavItem props={foo}>
      {this.state.showDetail? <NavSubItem props={bar}/> : null }
    </NavItem>
  )
}

render（）{
返回(
{this.state.showtail？：null}
)
}

这样，只有当showDetail==true时才会呈现