react如何实现父子通信

父子组件通信方法

在React中，父子组件通信主要通过props实现。父组件通过props向子组件传递数据和方法，子组件通过调用这些方法或直接使用数据与父组件交互。

父组件向子组件传递数据 父组件通过在子组件标签上添加属性来传递数据，子组件通过props接收这些数据。

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

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

子组件向父组件传递数据 父组件可以通过传递回调函数给子组件，子组件调用该函数将数据传回父组件。

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

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

使用Context跨层级通信

对于深层嵌套的组件，可以使用React Context避免逐层传递props。

// 创建Context
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>;
}

使用Ref直接访问子组件

父组件可以通过ref直接访问子组件的实例或DOM元素。

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

  const handleClick = () => {
    childRef.current.focus();
  };

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

// 子组件使用forwardRef
const Child = React.forwardRef((props, ref) => {
  return <input ref={ref} />;
});

状态提升模式

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

// 父组件管理共享状态
function Parent() {
  const [count, setCount] = React.useState(0);

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

// 子组件A显示状态
function ChildA(props) {
  return <div>Count: {props.count}</div>;
}

// 子组件B修改状态
function ChildB(props) {
  return <button onClick={props.onIncrement}>Increment</button>;
}