react标签间如何传递值

父组件向子组件传递值

父组件通过 props 向子组件传递数据。在父组件中，将数据作为属性传递给子组件，子组件通过 props 接收。

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

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

子组件向父组件传递值

子组件通过回调函数向父组件传递数据。父组件定义一个函数，通过 props 传递给子组件，子组件调用该函数并传递数据。

// 父组件
function ParentComponent() {
  const handleData = (data) => {
    console.log(data); // 输出: "Hello from Child"
  };
  return <ChildComponent onData={handleData} />;
}

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

兄弟组件间传递值

兄弟组件间可以通过共同的父组件传递数据。一个子组件通过回调函数将数据传递给父组件，父组件再通过 props 传递给另一个子组件。

// 父组件
function ParentComponent() {
  const [data, setData] = useState("");

  const handleData = (newData) => {
    setData(newData);
  };

  return (
    <>
      <ChildComponentA onData={handleData} />
      <ChildComponentB data={data} />
    </>
  );
}

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

// 子组件B
function ChildComponentB(props) {
  return <div>{props.data}</div>;
}

使用 Context API 跨层级传递值

Context 适用于跨多层组件传递数据，避免逐层传递 props。

// 创建 Context
const MyContext = React.createContext();

// 父组件提供数据
function ParentComponent() {
  return (
    <MyContext.Provider value="Context Data">
      <ChildComponent />
    </MyContext.Provider>
  );
}

// 子组件消费数据
function ChildComponent() {
  const data = useContext(MyContext);
  return <div>{data}</div>;
}

使用状态管理库（如 Redux）

对于复杂应用，可以使用 Redux 或 Zustand 等状态管理库共享数据。

// 使用 Redux 示例
import { useSelector, useDispatch } from "react-redux";

function ComponentA() {
  const dispatch = useDispatch();
  const sendData = () => {
    dispatch({ type: "SET_DATA", payload: "Redux Data" });
  };
  return <button onClick={sendData}>Send Data</button>;
}

function ComponentB() {
  const data = useSelector((state) => state.data);
  return <div>{data}</div>;
}

使用自定义事件或 Pub/Sub 模式

通过事件总线或发布订阅模式实现组件间通信，适用于非父子关系的组件。

// 使用 events 库示例
import { EventEmitter } from "events";
const eventBus = new EventEmitter();

// 组件A 发布事件
function ComponentA() {
  const emitData = () => {
    eventBus.emit("dataEvent", "Event Data");
  };
  return <button onClick={emitData}>Emit Data</button>;
}

// 组件B 订阅事件
function ComponentB() {
  const [data, setData] = useState("");

  useEffect(() => {
    eventBus.on("dataEvent", (data) => {
      setData(data);
    });
    return () => eventBus.off("dataEvent");
  }, []);

  return <div>{data}</div>;
}