react点击实现元素的显示和隐藏

落日映苍穹つ 2022-11-29 12:21 189阅读 0赞

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>控制元素的显示和隐藏</title>
        <style>
          * { 
            font-family: sans-serif;
            margin: 0;
          }
          button { 
            height: 40px;
            width: 200px;
          }
          .warning { 
            background-color: red;
            text-align: center;
            width: 100%;
            padding: 10px;
    
            font-size: 14pt;
            color: white;
          }
        </style>
      </head>
      <body>
        <div id="root"></div>
        <script src="./libs/babel.min.js"></script>
        <script src="./libs/react.js"></script>
        <script src="./libs/react-dom.js"></script>
        <script type="text/babel">
          // 警告信息div组件
          function WarningBanner(props) { 
            if (!props.warn) { 
              return null;
            }
            return <div className="warning">今晚打老虎Q!</div>;
          }
    
          //页面整体
          class Page extends React.Component { 
            constructor(props) { 
              super(props);
              this.state = {  showWarning: true };
              this.handleToggleClick = this.handleToggleClick.bind(this);
            }
    
            handleToggleClick() { 
              this.setState((state) => ({ 
                showWarning: !state.showWarning,
              }));
            }
    
            render() { 
              return (
                <div>
                  <WarningBanner warn={ this.state.showWarning} />
                  <button onClick={ this.handleToggleClick}>
                    { this.state.showWarning ? "Hide" : "Show"}
                  </button>
                </div>
              );
            }
          }
          ReactDOM.render(<Page />, document.getElementById("root"));
        </script>
      </body>
    </html>

**页面效果：**  
![在这里插入图片描述][20200820174140542.png_pic_center]  
![在这里插入图片描述][20200820174203502.png_pic_center]

[20200820174140542.png_pic_center]: /images/20221124/4241ec0c88064008b1e7d4fc6c0e6a66.png
[20200820174203502.png_pic_center]: /images/20221124/f21e0e541b6b49d18d91edb22125d186.png