React组件通信——父传子

父传子

1. 父组件传递数据，子组件标签身上绑定属性
2. 子组件接收数据， props的参数

import { useState } from "react";
// 定义自组件，接受props参数
function Son(props) {
  console.log(props);
  return <div>this is son{props.name}</div>;
}
// 定义父组件
function App() {
// 再父组件中定义要传递的参数
  let [name, setname] = useState("父组件参数");
  return (
    <div>
    // 在子组件上绑定属性
      <Son name={name} />
    </div>
  );
}

运行结果

直接写在标签里的中，父组件在名为children的prop属性中接收改内容

function Son(props) {
  return <div>this is son{props.children}</div>;
}
function App() {
  let [name, setname] = useState("父组件参数,在children里");
  return (
    <div>
      <Son>
        <div>{name}</div>
      </Son>
    </div>
  );
}

注意
props可以传递任意的数据，自组件只能读取数据，不能修改