我有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
}
答案 0 :(得分:3)
您可以通过多种方式执行此操作,
一种方法是,使用所有状态值和组件(如
)创建一个constconst 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>
)
}