在React 18中，父子组件之间的通信方式与之前的版本基本相同，主要可以通过以下几种方式实现：
1. Props（属性）
父组件向子组件传递数据：
父组件通过属性（props）向子组件传递数据，子组件通过props接收数据。
// 父组件
function ParentComponent() {
const message = "Hello from Parent";
return <ChildComponent message={message} />;
}
// 子组件
function ChildComponent({ message }) {
return <div>{message}</div>;
}
子组件向父组件传递数据：
子组件通过调用父组件传递下来的函数来传递数据。
// 父组件
function ParentComponent() {
const handleReceiveData = (data) => {
console.log("Received data from child:", data);
};
return <ChildComponent onReceiveData={handleReceiveData} />;
}
// 子组件
function ChildComponent({ onReceiveData }) {
const data = "Hello from Child";
return <button onClick={() => onReceiveData(data)}>Send Data to Parent</button>;
}
2. Context（上下文）
当需要在多个层级的组件之间传递数据时，可以使用Context。
// 创建Context
const MyContext = React.createContext();
// 父组件
function ParentComponent() {
const message = "Hello from Parent";
return (
<MyContext.Provider value={message}>
<ChildComponent />
</MyContext.Provider>
);
}
// 子组件
function ChildComponent() {
const message = useContext(MyContext);
return <div>{message}</div>;
}
3.Refs（引用）
如果需要直接在父组件中操作子组件的DOM或状态，可以使用Refs。
// 父组件
function ParentComponent() {
const childRef = useRef(null);
const handleParentClick = () => {
if (childRef.current) {
childRef.current.childMethod();
}
};
return (
<>
<ChildComponent ref={childRef} />
<button onClick={handleParentClick}>Call Child Method</button>
</>
);
}
// 子组件
const ChildComponent = forwardRef((props, ref) => {
const childMethod = () => {
console.log("Child method called");
};
useImperativeHandle(ref, () => ({
childMethod,
}));
return <div>Child Component</div>;
});
4. State Lift（状态提升）
当多个子组件需要共享状态时，可以将状态提升到它们的共同父组件中管理。
// 父组件
function ParentComponent() {
const [sharedState, setSharedState] = useState("initial state");
const updateState = (newState) => {
setSharedState(newState);
};
return (
<>
<ChildComponentA sharedState={sharedState} updateState={updateState} />
<ChildComponentB sharedState={sharedState} updateState={updateState} />
</>
);
}
// 子组件A
function ChildComponentA({ sharedState, updateState }) {
return <button onClick={() => updateState("New state from A")}>Update State from A</button>;
}
// 子组件B
function ChildComponentB({ sharedState }) {
return <div>Shared State: {sharedState}</div>;
}
在React 18中，这些通信方式仍然有效，并且可以结合使用以满足不同的需求。选择哪种方式取决于你的具体场景和组件结构。
