计数器案例

需求：如下图

20230402115528

点击按钮，实现数字加1，然后显示出来

代码实现

html 部分代码

html

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
</html>

js 部分代码

html

<!-- This setup is not suitable for production. -->
<!-- Only use it in development! -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script
  async
  src="https://ga.jspm.io/npm:es-module-shims@1.7.0/dist/es-module-shims.js"
></script>
<script type="importmap">
  {
    "imports": {
      "react": "https://esm.sh/react?dev",
      "react-dom/client": "https://esm.sh/react-dom/client?dev"
    }
  }
</script>
<script type="text/babel" data-type="module">
  import React, { StrictMode } from 'react'
  import { createRoot } from 'react-dom/client'

  function MessageBox({ num }) {
    return <h1>数量： {num}</h1>
  }

  let App = function App() {
    let [num, setNum] = React.useState(0)
    const clickHander = () => {
      setNum(num + 1)
      console.log(num)
    }
    return (
      <div>
        <p>
          <button onClick={clickHander}>点击+1</button>
        </p>
        <MessageBox num={num} />
      </div>
    )
  }

  const root = createRoot(document.getElementById('root'))
  root.render(
    <StrictMode>
      <App />
    </StrictMode>
  )
</script>

css 代码

css

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  margin: 20px;
  padding: 0;
}

h1 {
  margin-top: 0;
  font-size: 22px;
}

h2 {
  margin-top: 0;
  font-size: 20px;
}

h3 {
  margin-top: 0;
  font-size: 18px;
}

h4 {
  margin-top: 0;
  font-size: 16px;
}

h5 {
  margin-top: 0;
  font-size: 14px;
}

h6 {
  margin-top: 0;
  font-size: 12px;
}

code {
  font-size: 1.2em;
}

ul {
  padding-left: 20px;
}

:::

代码讲解

知识点 1，函数组件定义

function MessageBox({ num }) {
  return <h1>数量： {num}</h1>
}

知识点 2，事件绑定

1.定义事件处理函数
2.绑定事件的时候，以驼峰形式绑定事件名，例如：onClick、onMouseover
3.渲染数据，用大括号 {}
4.组件间传递数据，通过属性传递  num = {num}

计数器案例 ​

计数器案例