React 组件传值-父传子_react18 封装父子组件传参-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_60463255/article/details/144967525

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!--react核⼼包-->
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <!--react dom相关的包-->
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <!-- 提供es6和jsx的⽀持-->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <style>

  </style>
</head>

<body>
  <!--提供⼀个挂载点-->
  <div id="app"></div>
  <script type="text/babel">
    const container = document.getElementById('app')
    const root = ReactDOM.createRoot(container)

    class Parent extends React.Component {
      state = {
        msg: '父组件数据'
      }
      // 父组件给子组件传值
      render() {
        return <>
          <h1>我是父组件</h1>
          <Child a={this.state.msg} />
        </>
      }
    }

    class Child extends React.Component {
      // 子组件接收父组件传值
      render() {
        return <>
          <div>我是子组件 {this.props.a}</div>
          <GrandChild b={this.props.a} />
        </>
      }
    }

    // 孙组件接收父组件传值
    function GrandChild(props) {
      return <div>我是孙子组件 {props.b}</div>
    }

    root.render(
      <>
        <Parent />
      </>
    )
  </script>
</body>

</html>