react父子组件如何传值
父组件向子组件传值
父组件通过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>;
}子组件向父组件传值
子组件通过调用父组件传递的回调函数向父组件传递数据。父组件定义一个函数，将其作为prop传递给子组件，子组件在需要时调用该函数并传递数据。
父组件代码示例：
import ChildComponent from './ChildComponent';
function ParentComponent() {
const handleData = (data) => {
console.log("Data from child:", data);
};
return <ChildComponent onData={handleData} />;
}子组件代码示例：
function ChildComponent(props) {
const sendData = () => {
props.onData("Data from Child");
};
return <button onClick={sendData}>Send Data</button>;
}使用Context跨层级传值
对于深层嵌套的组件，可以使用React Context避免props层层传递。创建Context后，父组件作为Provider提供数据，子组件通过Consumer或useContext获取数据。
创建Context：
const MyContext = React.createContext();父组件代码示例：
function ParentComponent() {
const value = "Shared Value";
return (
<MyContext.Provider value={value}>
<ChildComponent />
</MyContext.Provider>
);
}子组件代码示例（使用useContext）：
function ChildComponent() {
const value = React.useContext(MyContext);
return <div>{value}</div>;
}使用Ref获取子组件实例
父组件可以通过ref获取子组件实例，直接调用子组件的方法或访问其状态。需要子组件是类组件或使用forwardRef包装的函数组件。
父组件代码示例：
import ChildComponent from './ChildComponent';
function ParentComponent() {
const childRef = React.useRef();
const handleClick = () => {
childRef.current.doSomething();
};
return (
<>
<ChildComponent ref={childRef} />
<button onClick={handleClick}>Call Child Method</button>
</>
);
}子组件代码示例（使用forwardRef）：
const ChildComponent = React.forwardRef((props, ref) => {
React.useImperativeHandle(ref, () => ({
doSomething: () => {
console.log("Child method called");
}
}));
return <div>Child Component</div>;
});
