当前位置：首页 > React

react子如何传父

2026-03-31 18:43:06React

子组件向父组件传递数据的方法

在React中，子组件向父组件传递数据通常通过回调函数实现。父组件定义一个方法并通过props传递给子组件，子组件调用该方法并传递数据。

使用回调函数传递数据

父组件定义一个处理函数并传递给子组件：

react子如何传父

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

  return <ChildComponent onData={handleData} />;
}

子组件通过props接收回调函数并调用：

function ChildComponent({ onData }) {
  const sendData = () => {
    onData('Hello from child!');
  };

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

通过事件传递数据

当子组件触发事件时，可以通过事件参数传递数据：

react子如何传父

function ChildComponent({ onData }) {
  const handleChange = (e) => {
    onData(e.target.value);
  };

  return <input type="text" onChange={handleChange} />;
}

使用Context API跨层级传递

对于深层嵌套组件，可以使用Context API：

const DataContext = React.createContext();

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

  return (
    <DataContext.Provider value={{ setData }}>
      <ChildComponent />
      <p>Received data: {data}</p>
    </DataContext.Provider>
  );
}

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

  return <button onClick={() => setData('Child data')}>Send Data</button>;
}

使用自定义事件

对于非父子关系的组件，可以使用自定义事件：

// 子组件
function emitCustomEvent(data) {
  const event = new CustomEvent('childEvent', { detail: data });
  window.dispatchEvent(event);
}

// 父组件
useEffect(() => {
  window.addEventListener('childEvent', (e) => {
    console.log(e.detail);
  });
  return () => window.removeEventListener('childEvent');
}, []);