react 父子组件如何通信

父子组件通信方法

在React中，父子组件通信主要通过props和回调函数实现。以下是几种常见方式：

父组件向子组件传递数据 通过props将数据从父组件传递给子组件。

// 父组件
function Parent() {
  const data = "Hello from parent";
  return <Child message={data} />;
}

// 子组件
function Child({ message }) {
  return <div>{message}</div>;
}

子组件向父组件传递数据 通过回调函数将子组件的数据传递回父组件。

// 父组件
function Parent() {
  const handleChildData = (data) => {
    console.log(data);
  };
  return <Child onSendData={handleChildData} />;
}

// 子组件
function Child({ onSendData }) {
  const sendData = () => {
    onSendData("Data from child");
  };
  return <button onClick={sendData}>Send Data</button>;
}

使用Context API 对于深层嵌套的组件，可以使用Context API避免prop drilling。

const MyContext = React.createContext();

// 父组件
function Parent() {
  return (
    <MyContext.Provider value="Context Value">
      <Child />
    </MyContext.Provider>
  );
}

// 子组件
function Child() {
  const value = React.useContext(MyContext);
  return <div>{value}</div>;
}

使用Refs 父组件可以通过ref直接调用子组件的方法。

// 子组件
const Child = React.forwardRef((props, ref) => {
  React.useImperativeHandle(ref, () => ({
    childMethod: () => {
      console.log("Child method called");
    }
  }));
  return <div>Child Component</div>;
});

// 父组件
function Parent() {
  const childRef = React.useRef();
  const callChildMethod = () => {
    childRef.current.childMethod();
  };
  return (
    <>
      <Child ref={childRef} />
      <button onClick={callChildMethod}>Call Child Method</button>
    </>
  );
}

状态提升 当多个子组件需要共享状态时，可以将状态提升到共同的父组件。

// 父组件
function Parent() {
  const [count, setCount] = React.useState(0);
  return (
    <>
      <ChildA count={count} />
      <ChildB setCount={setCount} />
    </>
  );
}

// 子组件A
function ChildA({ count }) {
  return <div>Count: {count}</div>;
}

// 子组件B
function ChildB({ setCount }) {
  return <button onClick={() => setCount(c => c + 1)}>Increment</button>;
}