Javascript 单击“反应”按钮时切换组件

我有4个组件。我只想一次渲染一个。我的导航中有按钮，当我单击其中一个按钮时，它应该呈现该组件，然后隐藏其他3个按钮，即将它们设置为null

这很简单，有两个组件。我有一个切换功能，如下所示：

toggle() {
  this.setState(prevState => ({
    showTable: !prevState.showTable
  }));
}

我已经尝试将其改编为我现在拥有的：

showComponent(component) {
  this.setState(prevState => ({
    [component]: !prevState.component
  }));
}

当我单击相应的按钮时，当前显示组件。但是，它不会在再次单击同一按钮时隐藏组件

我所有的按钮都这样调用此方法：

<button onClick={() => this.showComponent('AddPlayer')}>Add</button>
<button onClick={() => this.showComponent('ShowPlayers')}>Players</button>
<button onClick={() => this.showComponent()}>Table</button>
<button onClick={() => this.showComponent()}>Matches</button>

有什么想法吗

编辑：

---

你可以通过多种方式来实现

一种方法是，创建一个包含所有状态值和组件的常量，如

const components = {
    "AddPlayer": <AddPlayer />,
    "ShowPlayers": <Players />,
    "Something1": <Something1 />,
    "Something2": <Something2 />
}

内部渲染简单

render(){
    return(
        <div>
            {components[this.state.displayedTable]}
        </div>
    )
}

使用开关盒

---

你可以通过多种方式来实现

一种方法是，创建一个包含所有状态值和组件的常量，如

const components = {
    "AddPlayer": <AddPlayer />,
    "ShowPlayers": <Players />,
    "Something1": <Something1 />,
    "Something2": <Something2 />
}

内部渲染简单

render(){
    return(
        <div>
            {components[this.state.displayedTable]}
        </div>
    )
}

使用开关盒

---

能否展开问题以显示正在显示/隐藏的组件？能否发布渲染方法？因此，我可以很好地回答@thewalrusyep my bad，它现在在那里。您可以展开问题以显示/隐藏的组件吗？您可以发布您的渲染方法吗？所以我可以很好地回答“海象”我的错，现在有一件事很抱歉，如果我将东西传递到这样的组件中：我如何修复它？它说玩家是未定义的，这是因为玩家依赖于状态，但我刚刚把上面的所有内容都放在了状态中？别担心，修正了。把它移出了州对不起，如果我把东西传给这样一个组件：我怎么能修复它？它说玩家是未定义的，这是因为玩家依赖于状态，但我刚刚把上面的所有内容都放在了状态中？别担心，修正了。把它搬出了州

renderComponent(){
    switch(this.state.displayedTable) {
    case "AddPlayer":
      return <AddPlayer />
    case "ShowPlayers":
      return <Players />
  }
}

render () {
    return (
        <div>
            { this.renderComponent() }
        </div>
    )
}