ReactJS中如何从父组件更新子组件状态？已尝试传函数prop

你已经把状态和对应的更新函数通过props传递给子组件了，其实在父组件的handleClick里直接调用setChildState就能完成状态更新——因为这个状态本身就是父组件维护的，子组件只是负责展示它的值。

修改后的代码如下：

// 父组件
function Parent() {
    const [childState, setChildState] = useState(false); 
    const handleClick = () => { 
        // 直接调用setChildState更新状态，这里用函数式更新确保基于最新状态修改
        setChildState(prevState => !prevState);
    }; 
    return ( 
        <div> 
            <Child childState={childState} setChildState={setChildState} /> 
            <button onClick={handleClick}>更新子组件状态</button> 
        </div> 
    );
}
// 子组件 
function Child({ childState, setChildState }) {
    return ( 
        <div> 
            <p>子组件状态: {childState.toString()}</p> 
        </div> 
    ); 
}

关键说明 #

• childState是父组件的状态变量，子组件仅通过props接收并渲染该值，并没有自己维护独立状态。
• 父组件调用setChildState时，React会更新父组件的状态，触发父组件重新渲染，同时将更新后的childState传递给子组件，子组件随之展示最新状态。
• 使用prevState => !prevState这种函数式更新方式，是为了避免依赖旧状态值导致的更新异常，确保每次更新都基于当前最新的状态。

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