react父子组件传值

1、父组件传值给子组件
通过回调函数的方式

import { useState } from 'react';



const Son = ({ setCount }) => {
    return <button onClick={() => setCount(“传递给父组件的值”)}>点击</button>;
};

const Father = () => {
     const [count, setCount] = useState(“接收参数”);
    return (
        <>
            <div>{count}</div>
            <Son setCount={setCount} />
        </>
    );
};

export default Father;

2、子组件传值给父组件

//父组件
import Child from '../Child/index'

const Parent = () => {

    const onClick = (value) => {
        console.log(value,'点击了')
    }

    return(
        <div style={{background:'#fff',height:'500px',width:'500px'}}>
            <Child
                title='测试组件' 
                click={onClick}
            />
        </div>
    )
}

export default Parent

//子组件
const Child = (props) => {
    console.log(props.title,'title')
    
    const handleClick = (value) => {
        props.click(value)
    }

    return(
        <div style={{background:'red',height:'200px',width:'200px'}} onClick={()=>{handleClick(1)}}>
            子组件
        </div>
    )
}

export default Child