zoukankan      html  css  js  c++  java
  • react条件渲染

    function WarningTip(props) {
      if (!props.warn) {
        return null;
      }
      return (
        <h1 className = 'warning'>warning</h1>
      );
    }
    
    class Hello extends React.Component {
      constructor(props) {
        super(props);
        this.state = {isWarningOn: false};
        this.handleWarn = this.handleWarn.bind(this);
      }
      handleWarn() {
        this.setState(prevState => ({
          isWarningOn: !prevState.isWarningOn
        }));
      }
      render() {
        return (
          <div>
            <WarningTip warn={this.state.isWarningOn}/>
            <button onClick={this.handleWarn}>{this.state.isWarningOn? 'on':'off'}</button>
          </div>
        );
      }
    }
    let root = document.getElementById('root');
    ReactDOM.render(<Hello />,root);
    
  • 相关阅读:
    暑假学习
    暑假学习
    暑假学习
    暑假学习
    暑假学习
    经验教训+总结
    NT 时刻
    联赛模拟测试 17
    联赛模拟测试 16
    联赛模拟测试 15
  • 原文地址:https://www.cnblogs.com/dkplus/p/8875392.html
Copyright © 2011-2022 走看看