我想在按钮单击时使用条件渲染组件,我编写了以下代码,但不起作用,当我单击漫画时,应加载漫画组件,而当我单击竞赛按钮时,应加载竞赛组件,有人可以帮忙吗下面是代码和CSS文件
class Head extends Component{ constructor(){ super(); this.state = { buttonId: null } this.setButton = this.setButton.bind(this); } setButton(id){ this.setState({buttonId: id}); } render(){ if(this.state.buttonId == 1){ <Comic/> } else if(this.state.buttonId == 2){ <Contest/> } else { <Comic/> } return( <div> <input className={this.state.buttonId === 1? "button1 orange" : "button1"} onClick={() => this.setButton(1)} value="Comic" type="button" ref="button" /> <input className={this.state.buttonId === 2? "button2 orange" : "button2"} onClick={() => this.setButton(2)} value="Contest" ref="button1" type="button" /> </div> ); } } export default Head; input[type="button"]{ background-color: white; } input[type="button"].orange{ background-color: orange; }
您不退还组件,请尝试以下操作:
class Head extends Component{ constructor(){ super(); this.state = { buttonId: null } this.setButton = this.setButton.bind(this); } setButton(id){ this.setState({buttonId: id}); } render(){ return( <div> {this.state.buttonId === 1 && <Comic/>} {this.state.buttonId === 2 && <Contest/>} {this.state.buttonId !== 1 && this.state.buttonId !== 2 && <Comic/>} <input className={this.state.buttonId === 1? "button1 orange" : "button1"} onClick={() => this.setButton(1)} value="Comic" type="button" ref="button" /> <input className={this.state.buttonId === 2? "button2 orange" : "button2"} onClick={() => this.setButton(2)} value="Contest" ref="button1" type="button" /> </div> ); } } export default Head;