React中如何获取子组件的状态值并同步到父组件展示

方案1：状态提升（推荐使用） #

该方案消除了重复的状态定义，从根源避免父子组件状态不一致的问题，所有状态变更统一在父组件管理，子组件仅作为受控组件使用，适配绝大多数业务场景。

修改后父组件代码 #

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

const Parent = () => {
    const [value, setValue] = useState(0);
    return (
        <>
            <span>{value}</span>
            {/* 把状态和更新状态的方法都传给子组件 */}
            <Child value={value} setValue={setValue} />
        </>
    );
}
export default Parent;

修改后子组件代码 #

import React from 'react';

// 接收父组件传的value和setValue方法，不需要单独维护内部state
const Child = ({value, setValue}) => {
    const increment = () => {
        setValue(prevState => prevState + 1)
    };

    const decrement = () => {
        setValue(prevState => prevState - 1)
    };

    return (
        <>
            <button onClick={increment}>+</button>
            <span>{value}</span>
            <button onClick={decrement}>-</button>
        </>
    );
};
export default Child;

方案2：保留子组件独立state，同步更新到父组件 #

如果业务场景需要子组件独立维护自身状态，同时需要把状态同步给父组件，可以通过父组件传递回调函数的方式实现：

修改后父组件代码 #

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

const Parent = () => {
    const [value, setValue] = useState(0);
    // 定义接收子组件状态的回调方法
    const handleChildValueChange = (newVal) => {
        setValue(newVal);
    }
    return (
        <>
            <span>{value}</span>
            <Child initValue={value} onChange={handleChildValueChange} />
        </>
    );
}
export default Parent;

修改后子组件代码 #

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

const Child = ({initValue, onChange}) => {
    const [value, setValue] = useState(initValue);

    // 可选配置：如果父组件的initValue会外部变更，可加effect同步子组件的初始值，初始值固定可删除该逻辑
    useEffect(() => {
        setValue(initValue);
    }, [initValue]);

    const increment = () => {
        setValue(prevState => {
            const newVal = prevState + 1;
            // 状态变更后调用父组件传的回调，同步最新值
            onChange(newVal);
            return newVal;
        })
    };

    const decrement = () => {
        setValue(prevState => {
            const newVal = prevState - 1;
            onChange(newVal);
            return newVal;
        })
    };

    return (
        <>
            <button onClick={increment}>+</button>
            <span>{value}</span>
            <button onClick={decrement}>-</button>
        </>
    );
};
export default Child;

内容的提问来源于stack exchange，提问作者Propool