react父组件往孙子组件传值Context API

步骤：
创建一个 Context
在父组件中用 Provider 提供值
在孙子组件中用 useContext 消费值

// 创建 Context
const MyContext = React.createContext();// 父组件
const Parent = () => {const value = "Hello from parent";return (<MyContext.Provider value={value}><Child /></MyContext.Provider>);
};// 子组件（无需关心 value）
const Child = () => {return <GrandChild />;
};// 孙子组件
const GrandChild = () => {const value = React.useContext(MyContext);return <div>{value}</div>;
};

React.forwardRef + useImperativeHandle 实现子组件暴露方法

const ChildComponent = forwardRef((props, ref) => {const [inputValue, setInputValue] = useState('');useImperativeHandle(ref, () => ({clearInput: () => setInputValue(''),}));return <input value={inputValue} onChange={(e) => setInputValue(e.target.value)} />;
});

父组件调用：

const childRef = useRef();
<ChildComponent ref={childRef} />
<button onClick={() => childRef.current?.clearInput()}>Clear</button>```