当前位置：首页 > React

react子组件如何向父组件传值

2026-01-26 07:58:37React

子组件向父组件传值的常见方法

使用回调函数（Props传递）
父组件通过props向子组件传递一个回调函数，子组件调用该函数并将数据作为参数传递。这是React中最基础的传值方式。

// 父组件
function Parent() {
  const handleData = (data) => {
    console.log("子组件传递的数据:", data);
  };
  return <Child onData={handleData} />;
}

// 子组件
function Child({ onData }) {
  const sendData = () => {
    onData("Hello Parent");
  };
  return <button onClick={sendData}>传递数据</button>;
}

使用Context API
当组件层级较深时，可通过React Context实现跨层级数据传递。父组件创建Context，子组件通过useContext或Consumer获取数据和方法。

const DataContext = React.createContext();

// 父组件
function Parent() {
  const [data, setData] = useState("");
  return (
    <DataContext.Provider value={{ setData }}>
      <Child />
      <p>接收到的数据: {data}</p>
    </DataContext.Provider>
  );
}

// 子组件
function Child() {
  const { setData } = useContext(DataContext);
  return <button onClick={() => setData("Context Data")}>传递数据</button>;
}

使用状态管理库（Redux/Zustand）
在复杂应用中，可通过Redux等状态管理工具实现组件间通信。子组件通过dispatch action更新全局状态，父组件订阅该状态。

// 使用Zustand示例
const useStore = create((set) => ({
  data: "",
  setData: (newData) => set({ data: newData })
}));

// 子组件
function Child() {
  const setData = useStore((state) => state.setData);
  return <button onClick={() => setData("Zustand Data")}>传递数据</button>;
}

// 父组件
function Parent() {
  const data = useStore((state) => state.data);
  return <p>接收到的数据: {data}</p>;
}

使用自定义事件（较少用）
通过创建自定义事件实现通信，适用于非React组件体系或特殊场景。

// 子组件
function Child() {
  const emitEvent = () => {
    const event = new CustomEvent("childEvent", { detail: "Event Data" });
    window.dispatchEvent(event);
  };
  return <button onClick={emitEvent}>触发事件</button>;
}

// 父组件
function Parent() {
  const [data, setData] = useState("");
  useEffect(() => {
    window.addEventListener("childEvent", (e) => setData(e.detail));
    return () => window.removeEventListener("childEvent");
  }, []);
  return <p>接收到的数据: {data}</p>;
}