如何传递状态给子组件，使子组件随父组件状态变化更新？

问题原因 #

你犯了一个典型的React使用误区：把<Child>组件实例直接存在useState状态里了。React只会在组件首次渲染时创建这个Child实例，后续父组件的state1更新时，currentView状态不会跟着刷新——因为useState的初始值只在第一次渲染时生效，所以子组件永远拿到的是最开始的state1值，自然没法和父组件同步。

修复后的代码 #

import { useState } from 'react';

function Parent(props) {
    const [state1, setState1] = useState(true);
    
    function checkHandler(event) {
        setState1(event.target.checked);
    }
    
    return (
        <div>
            Text #1: {state1 ? "true" : "false"}
            {/* 直接在这里渲染Child，不用存状态 */}
            <Child checkHandler={checkHandler} state1={state1} />
        </div>
    );
}

function Child({ state1, checkHandler }) {
    return (
        <div>
            Text #2: {state1 ? "true" : "false"}
            <form>
                <input type="checkbox" id="checkbox" onChange={checkHandler} />
                {/* React里label用htmlFor代替for，避免和JS关键字冲突 */}
                <label htmlFor="checkbox">Check</label>
            </form>
        </div>
    );
}

export default Parent;

关键说明 #

• React组件的渲染逻辑应该直接写在JSX结构里，除非是需要动态切换不同组件类型的场景（这种情况也应该用状态控制组件类型，而非存储组件实例）。
• 顺带修正了一个小细节：HTML里的for属性在React JSX中要写成htmlFor，因为for是JavaScript的保留关键字，直接用会报错。

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