React中使用map展示列表数据，计数器案例,react在HTML中代码片段React中使用map展示列表数据，rea

map展示列表数据

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>map展示列表数据</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
      class App extends React.Component {
        constructor() {
          super();
          this.state = {
            list: ["zm", "ww", "dhs"],
          };
        }
        render() {
          return (
            <div>
              <h2>列表数据</h2>
              <ul>
                {this.state.list.map((item) => (
                  <li key={item}>{item}</li>
                ))}
              </ul>
            </div>
          );
        }
      }
      // 渲染 React 组件
      const root = ReactDOM.createRoot(document.getElementById("root"));
      root.render(<App />);
    </script>
  </body>
</html>

计数器案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>计数器案例</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
      class App extends React.Component {
        constructor() {
          super();
          this.state = {
            counter: 1,
          };
          this.add = this.add.bind(this);
          this.sub = this.sub.bind(this);
        }
        render() {
          return (
            <div>
              <h2>{this.state.counter}</h2>
              <button onClick={this.add.bind(this)}>+</button>
              <button onClick={this.sub}>-</button>
            </div>
          );
        }
        add() {
          this.setState({
            counter: this.state.counter + 1,
          });
        }
        sub() {
          this.setState({
            counter: this.state.counter - 1,
          });
        }
      }
      const root = ReactDOM.createRoot(document.getElementById("root"));
      root.render(<App />);
    </script>
  </body>
</html>

用户代码片段

"react在HTML中代码片段": {
  "prefix": "reacthtml",
  "body": [
    "<!DOCTYPE html>",
    "<html lang="en">",
    "  <head>",
    "    <meta charset="UTF-8" />",
    "    <meta name="viewport" content="width=device-width, initial-scale=1.0" />",
    "    <title>用户代码片段</title>",
    "  </head>",
    "  <body>",
    "    <div id="root"></div>",
    "    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>",
    "    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>",
    "    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>",
    "    <script type="text/babel">",
    "      // 定义App根组件",
    "      class App extends React.Component {",
    "        constructor() {",
    "          super();",
    "          this.state = {",
    "            msg: "hello zm",",
    "          };",
    "        }",
    "        render() {",
    "          return (",
    "            <div>",
    "              <h2>{this.state.msg}</h2>",
    "            </div>",
    "          );",
    "        }",
    "      }",
    "      // 2.创建root并且渲染App组件",
    "      const root = ReactDOM.createRoot(document.getElementById("root"));",
    "      root.render(<App />);",
    "    </script>",
    "  </body>",
    "</html>",
    ""
  ],
  "description": "react在HTML中代码片段"
}