Question

我想在按钮点击时条件渲染组件，我写了下面的代码，但它不起作用，当我点击漫画时，应加载漫画组件，当我点击比赛按钮时，应该加载比赛组件，有人可以帮我解决这个问题以下是代码和CSS文件

      input[type="button"]{
    background-color: white;
  }
    input[type="button"].orange{
    background-color: orange;
  }

{{1}}

Answer 1

您没有退回组件，请尝试以下操作：

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;

Answer 2

您的.render必须返回您要显示的组件。

因此代码看起来应该像 -

let component = this.state.buttonId === 2 ? <Contest/> : <Comic/>

return(
    <>
        {component}
        <div>
            {/* your button here */}      
        </div>
    </>
);

React中的条件渲染按钮单击

2 个答案: