React 父子组件传值

1.父组件传值给子组件

import React, { useState } from 'react';

// 定义一个Son的子组件
const Son = (props: any) => {
  return <div>我是子组件：{props.paramsFromParent}</div>;
};

// 定义一个Parent的父组件
const Parent = () => {
  const [params, setParams] = useState('我是父组件传过来的值'); // 初始化给params一个初始值'我是父组件传过来的值'
  return (
    <>
      <div>我是父组件</div>
      <Son paramsFromParent={params} />
    </>
  );
};

export default Parent;

2.子组件传值给父组件，首先父组件传给子组件一个函数changeMoney，然后子组件调用函数，并将要传的值放进去，从而使得父组件接收到这个值，并在changeMoney中进行处理，改变自己组件中变量的状态。

import React, { useState, useContext } from 'react';

// 定义一个Child的子组件
const Child = (props: any) => {
    const hdlClick = ()=>{
        props.getMoney('我是子组件的值');
    }
  
  return (
    <>
      <button onClick={hdlClick}>我是子组件</button>
    </>
  );
};

// 定义一个Parent的父组件
const Parent = () => {
  const [money, setMoney] = useState('1000元');
  // 定义一个函数,专门用来修改money的值
  const changeMoney = (value: any) => {
    setMoney(value);
  };
  return (
    <>
      <div>我是父组件</div>
      <Child getMoney={changeMoney} />
      {money}
    </>
  );
};

export default Parent;