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;
