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

最新推荐文章于 2022-12-29 19:41:51 发布

你的玄烨

最新推荐文章于 2022-12-29 19:41:51 发布

阅读量2.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： react 前端框架文章标签： react reactjs 前端

本文链接：https://blog.youkuaiyun.com/CCQStudy/article/details/108128853

react 同时被 2 个专栏收录

17 篇文章

订阅专栏

前端框架

13 篇文章

订阅专栏

本文介绍了一个使用React实现的警告信息div组件，该组件能够根据状态动态显示或隐藏。通过按钮点击事件，用户可以切换警告信息的显示状态，提供了一种简单的交互方式来控制页面元素的可见性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>