react父子组件如何传值
React 父子组件传值方法
父组件向子组件传值（Props）
父组件通过属性（props）将数据传递给子组件。子组件通过 props 接收数据。
父组件代码示例：
import ChildComponent from './ChildComponent';
function ParentComponent() {
const message = "Hello from Parent";
return <ChildComponent message={message} />;
}子组件代码示例：
function ChildComponent(props) {
return <div>{props.message}</div>;
}子组件向父组件传值（回调函数）
父组件通过传递回调函数给子组件，子组件调用该函数并传递数据。
父组件代码示例：
import ChildComponent from './ChildComponent';
function ParentComponent() {
const handleData = (data) => {
console.log("Data from child:", data);
};
return <ChildComponent onData={handleData} />;
}子组件代码示例：
function ChildComponent({ onData }) {
const sendData = () => {
onData("Hello from Child");
};
return <button onClick={sendData}>Send Data</button>;
}使用 Context API 跨层级传值
适用于深层嵌套组件传值，避免逐层传递 props。
创建 Context：
import { createContext, useContext } from 'react';
const MyContext = createContext();
function ParentComponent() {
return (
<MyContext.Provider value={"Shared Data"}>
<ChildComponent />
</MyContext.Provider>
);
}
function ChildComponent() {
const value = useContext(MyContext);
return <div>{value}</div>;
}使用 Refs 访问子组件
父组件通过 ref 直接调用子组件方法或访问其状态。
父组件代码示例：
import { useRef } from 'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
const childRef = useRef();
const getChildData = () => {
alert(childRef.current.getValue());
};
return (
<>
<ChildComponent ref={childRef} />
<button onClick={getChildData}>Get Child Data</button>
</>
);
}子组件代码示例（需使用 forwardRef）：
import { forwardRef, useImperativeHandle } from 'react';
const ChildComponent = forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({
getValue: () => "Data from Child"
}));
return <div>Child Component</div>;
});每种方法适用于不同场景，根据组件关系和需求选择合适的方式。简单父子通信推荐使用 props 和回调函数，深层嵌套组件可考虑 Context API，需要直接访问子组件时使用 refs。
