react条件渲染

最新推荐文章于 2025-09-12 16:56:45 发布

weixin_30911809

最新推荐文章于 2025-09-12 16:56:45 发布

阅读量46

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/dkplus/p/8875392.html

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);

转载于:https://www.cnblogs.com/dkplus/p/8875392.html