第24节——react hooks组件传值 - 父子组件之间的传值

一、概念

一句话概括，react hook 父子组件之间通过props进行传值

二、父传子

父组件：在子组件标签上定义属性

子组件：函数组件接收一个props是一个对象，父组件传的属性名就是props对象的key，属性的值就是对应的value

const Child = (props) => {
  // 父组件穿过来一个name
  return (
    <div>
      <div>{props.name}</div>
    </div>
  )
}


const Parent = () => {
  // 组件标签上传递属性
  return (
    <Child name='张三'></Child>
  )
}

三、子传父

一句话概括：在props上定义一个方法，调用方法的时候传入参数，达到传值的效果

父组件：在子组件标签上定义一个属性，属性值为一个方法

import { useState } from "react";

const Child = (props) => {
  const toParent = () => {
    // 调用props上面的getChildData方法
    props.getChildData && props.getChildData("传给父组件");
  };

  return (
    <div>
      <button onClick={toParent}>往父组件传值</button>
    </div>
  );
};

const Parent = () => {

  // 点击子组件 就会触发这个函数
  const getChild = (msg) => {
    console.log(msg)
  }

  // 组件标签上传递属性,属性的值是一个函数
  return <Child getChildData={getChild}></Child>;
};