react如何实现父子通信

父子组件通信方法

在React中，父子组件通信主要通过props（属性）传递数据。以下是几种常见实现方式：

父传子：通过props传递数据

父组件通过属性向子组件传递数据或函数，子组件通过props接收。

// 父组件
function Parent() {
  const [message, setMessage] = useState('Hello from parent');

  return <Child message={message} />;
}

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

子传父：通过回调函数

父组件将函数作为prop传递给子组件，子组件调用该函数与父组件通信。

// 父组件
function Parent() {
  const handleChildClick = (data) => {
    console.log('Data from child:', data);
  };

  return <Child onClick={handleChildClick} />;
}

// 子组件
function Child({ onClick }) {
  return <button onClick={() => onClick('Child data')}>Click</button>;
}

使用Context跨层级通信

当组件层级较深时，可使用React Context避免props逐层传递。

const MyContext = createContext();

// 父组件
function Parent() {
  const value = 'Context value';

  return (
    <MyContext.Provider value={value}>
      <Child />
    </MyContext.Provider>
  );
}

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

使用ref直接访问子组件

父组件通过ref获取子组件实例，调用其方法或访问状态（需子组件为class组件或使用forwardRef）。

// 子组件（使用forwardRef）
const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    childMethod: () => 'Child method called'
  }));

  return <div>Child</div>;
});

// 父组件
function Parent() {
  const childRef = useRef();

  const handleClick = () => {
    console.log(childRef.current.childMethod());
  };

  return (
    <>
      <Child ref={childRef} />
      <button onClick={handleClick}>Call Child Method</button>
    </>
  );
}

状态提升（Lifting State Up）

多个子组件需要共享状态时，将状态提升到最近的共同父组件中管理。

// 父组件
function Parent() {
  const [count, setCount] = useState(0);

  return (
    <>
      <ChildA count={count} />
      <ChildB onIncrement={() => setCount(c => c + 1)} />
    </>
  );
}

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

// 子组件B
function ChildB({ onIncrement }) {
  return <button onClick={onIncrement}>Increment</button>;
}