在按钮单击时切换组件

时间:2017-09-26 10:58:31

标签: javascript reactjs components toggle

我有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
            }

1 个答案:

答案 0 :(得分:3)

您可以通过多种方式执行此操作,

一种方法是,使用所有状态值和组件(如

)创建一个const
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>
    )
}