1. 父组件通过 Props 向子组件传递数据
这是最常见也是最基本的父子组件通信方式。父组件通过 props 将数据或回调函数传递给子组件。
示例代码:
// 子组件接收来自父组件的数据
interface ChildProps {
message: string;
}
const ChildComponent: React.FC<ChildProps> = ({ message }) => {
return <h1>{message}</h1>;
};
// 父组件向子组件传递数据
const ParentComponent = () => {
const parentMessage = "Hello from Parent!";
return (
<ChildComponent message={parentMessage} />
);
};
2. 子组件通过回调函数通知父组件
如果子组件需要与父组件交互,则可以通过父组件传递一个回调函数作为 prop,在子组件中调用该函数以通知父组件某些事件的发生。
示例代码:
interface ChildProps {
onButtonClick: () => void;
}
const ChildComponent: React.FC<ChildProps> = ({ onButtonClick }) => {
return (
<button onClick={onButtonClick}>
Click Me to Notify Parent
</button>
);
};
// 父组件提供回调函数处理逻辑
const ParentComponent = () => {
const notifyParent = () => {
console.log("Button clicked in child component!");
};
return (
<ChildComponent onButtonClick={notifyParent} />
);
};
3. 使用 Refs 访问子组件实例
虽然不建议频繁使用 refs 来管理子组件的状态或行为,但在特殊场景下仍然可行。可以结合 React.forwardRef
和 useImperativeHandle
来暴露子组件的功能供父组件调用。
示例代码:
// 子组件定义并通过 forwardRef 曝露功能
interface ChildProps{}
const ChildComponent = React.forwardRef((props:ChildProps, ref) => {
const [count, setCount] = React.useState(0);
// 暴露方法给父组件
React.useImperativeHandle(ref, () => ({
increment() {
setCount(count + 1);
},
}));
return <div>Current Count: {count}</div>;
});
export default ChildComponent;
// 父组件利用 useRef 获取子组件实例
const ParentComponent = () => {
const childRef = React.useRef<any>();
const handleClickIncrement = () => {
childRef.current?.increment();
};
return (
<>
<button onClick={handleClickIncrement}>Increment Child State</button>
<ChildComponent ref={childRef} />
</>
);
};
4. 使用 Context 提供全局状态共享
对于复杂的应用程序结构,可能涉及多个层级间的通信需求。此时可以采用上下文 API (React.createContext
) 来简化跨层通信过程。
示例代码:
// 创建 context 并设置默认值
const MyContext = React.createContext<string | null>(null);
// Provider 组件封装状态
const ContextProvider = ({ children }: { children: React.ReactNode }) => {
const [value, setValue] = React.useState("Initial Value");
return (
<MyContext.Provider value={value}>
{children}
</MyContext.Provider>
);
};
// 子组件消费 context 数据
const ChildComponent = () => {
const contextValue = React.useContext(MyContext);
return <p>Received From Context: {contextValue}</p>;
};
// 父组件嵌套 provider 及消费者
const ParentComponent = () => {
return (
<ContextProvider>
<ChildComponent />
</ContextProvider>
);
};