React 学习之父子组件传值

父组件可以通过props、原型方法向子组件通信，子组件可以通过回调函数、事件冒泡向父组件通信。

1. 父组件向子组件通信

父组件向子组件传值之props方法：

父组件

import React from 'react'
import Child from "../Child";

function CounterHook() {
   
    return (
        <div>
            {/*父子组件传值，props方式*/}
            <Child name={'CounterHook'} />
        </div>
    )
}

export default CounterHook

子组件：

import React from "react";

const Child = ({name}) => {
    return (
        <div>
            <p>子组件得到的值：{name}</p>
        </div>

    )
}

export default Child

2。子组件向父组件传值

子组件向父组件传值之回调函数方法：

父组件：

import React, {useState} from 'react'
import Child from "../Child";

function CounterHook() {
    const [count, setCount] = useState(0)
    return (
        <div>
            <p>父组件： {count}</p>

            {/*name:父组件向子组件传值，props方式； setCount：子组件向父组件传值*/}
            <Child name={'CounterHook'} setCount={setCount}/>

        </div>
    )
}

export default CounterHook

子组件：点击子组件中的按钮，父组件中的count值每次会加1

import React from "react";


const Child = ({name,setCount}) => {
    return (
        <div>
            <p>子组件得到的值：{name}</p>
            <button onClick={()=>setCount(count => count+1)}>点击+1</button>
        </div>

    )
}

export default Child