在點擊按鈕時切換組件的響應

Question

我有4個組件。我只想一次渲染一個。我有我的導航按鈕，當我點擊一個它應該渲染該組件，然後隱藏其他3（即將它們設置爲空）

這很容易與2個組件。我只是有一個切換功能，像這樣：

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> 

什麼想法？

編輯：

{this.state.AddPlayer ? 
       <div className="add-container"> 
       <AddPlayer /> 
       </div> 
       : 
       null 
      } 
      {this.state.ShowPlayers ? 
       <div className="players-container"> 
       <Players /> 
       </div> 
       : 
       null 
      } 

Answer 1

您可以通過多種方式做到這一點，

的一種方法是，創建與所有國家的價值觀和組件的常量像

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

設定值狀態像

showComponent(componentName) { 
    this.setState({displayedTable: componentName}); 
} 

和內部渲染簡單

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

使用開關箱

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

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