当前位置：首页 > React

react子如何传父

2026-01-24 10:57:42React

在React中，子组件向父组件传递数据通常通过回调函数实现。以下是几种常见方法：

通过props传递回调函数

父组件将一个函数作为props传递给子组件，子组件调用该函数并传递数据。

父组件示例：

function Parent() {
  const handleData = (data) => {
    console.log('Received from child:', data);
  };

  return <Child onSendData={handleData} />;
}

子组件示例：

function Child({ onSendData }) {
  const sendData = () => {
    onSendData('Hello from child');
  };

  return <button onClick={sendData}>Send Data</button>;
}

使用Context API

对于深层嵌套组件，可通过Context共享状态和更新函数。

创建Context：

const DataContext = React.createContext();

function Parent() {
  const [data, setData] = useState(null);

  return (
    <DataContext.Provider value={{ data, setData }}>
      <Child />
    </DataContext.Provider>
  );
}

子组件使用：

function Child() {
  const { setData } = useContext(DataContext);

  const updateData = () => {
    setData('Updated from child');
  };

  return <button onClick={updateData}>Update Data</button>;
}

使用状态管理库

在Redux或MobX等状态管理方案中，子组件可直接dispatch action或修改store。

Redux示例：

function Child() {
  const dispatch = useDispatch();

  const sendData = () => {
    dispatch({ type: 'UPDATE_DATA', payload: 'Redux data' });
  };

  return <button onClick={sendData}>Dispatch</button>;
}

自定义事件（较少使用）

通过EventEmitter等模式实现自定义事件机制。

事件总线示例：

react子如何传父

const events = new EventEmitter();

function Parent() {
  useEffect(() => {
    events.on('childEvent', (data) => {
      console.log(data);
    });
    return () => events.off('childEvent');
  }, []);
}

function Child() {
  const emitEvent = () => {
    events.emit('childEvent', 'Event data');
  };
}

每种方法适用于不同场景：简单组件推荐props回调，复杂应用可考虑Context或状态管理库。选择时需权衡组件耦合度和项目复杂度。

标签: react