向React箭头函数组件传递函数/状态 实现子组件修改父组件状态

要让子组件修改父组件的state，核心逻辑是将父组件中封装好的状态修改函数作为props传递给子组件，子组件触发该函数即可间接修改父组件的state，具体实现代码如下：

完整实现代码 #

import { useState } from 'react';

const ParentComponent = () => {
    const [myState, setMyState] = useState(false);
    // 这里推荐用函数式更新写法，避免依赖闭包旧值导致的更新异常
    const changeState = () => setMyState(prevState => !prevState);

    return(
        // 将修改状态的方法和状态本身作为props传递给子组件
        <ChildComponent changeState={changeState} myState={myState} />
    );
}

// 子组件通过props接收父组件传入的参数
const ChildComponent = (props) => {
    return (
        <div>
            <p>父组件当前状态：{props.myState ? '开启' : '关闭'}</p>
            {/* 触发父组件传入的状态修改方法 */}
            <button onClick={props.changeState}>切换父组件状态</button>
        </div>
    );
}

补充说明 #

• 父组件不需要直接把setMyState暴露给子组件，仅传递封装好的changeState方法即可，符合状态封装的最佳实践
• 如果习惯用解构赋值接收props，子组件也可以写成更简洁的形式：

const ChildComponent = ({ changeState, myState }) => {
    return (
        <div>
            <p>父组件当前状态：{myState ? '开启' : '关闭'}</p>
            <button onClick={changeState}>切换父组件状态</button>
        </div>
    );
}

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