js实现父子传值
父子组件传值（父传子）
在React中，父组件向子组件传递数据通常通过props实现。父组件在调用子组件时通过属性传递数据，子组件通过props接收。
父组件代码示例：
import ChildComponent from './ChildComponent';
function ParentComponent() {
const data = "Hello from Parent";
return (
<div>
<ChildComponent message={data} />
</div>
);
}子组件代码示例：
function ChildComponent(props) {
return <div>{props.message}</div>;
}子父组件传值（子传父）
子组件向父组件传递数据需要通过回调函数。父组件定义一个函数并通过props传递给子组件，子组件调用该函数并传入参数。
父组件代码示例：
import ChildComponent from './ChildComponent';
function ParentComponent() {
const handleData = (data) => {
console.log(data);
};
return (
<div>
<ChildComponent onData={handleData} />
</div>
);
}子组件代码示例：
function ChildComponent(props) {
const sendData = () => {
props.onData("Data from Child");
};
return (
<button onClick={sendData}>Send Data</button>
);
}使用Context跨层级传值
对于深层嵌套的组件，可以使用React Context避免props逐层传递。
创建Context：
const MyContext = React.createContext();父组件提供值：
function ParentComponent() {
return (
<MyContext.Provider value="Shared Data">
<ChildComponent />
</MyContext.Provider>
);
}子组件消费值：
function ChildComponent() {
return (
<MyContext.Consumer>
{value => <div>{value}</div>}
</MyContext.Consumer>
);
}使用Ref获取子组件实例
父组件可以通过ref获取子组件实例并直接调用其方法。
父组件代码示例：
import ChildComponent from './ChildComponent';
function ParentComponent() {
const childRef = React.useRef();
const handleClick = () => {
childRef.current.childMethod();
};
return (
<div>
<ChildComponent ref={childRef} />
<button onClick={handleClick}>Call Child Method</button>
</div>
);
}子组件代码示例：
const ChildComponent = React.forwardRef((props, ref) => {
React.useImperativeHandle(ref, () => ({
childMethod: () => {
console.log("Child method called");
}
}));
return <div>Child Component</div>;
});
