当前位置：首页 > React

react组件通信实现

2026-01-27 09:47:06React

React 组件通信方法

父组件向子组件传递数据
通过 props 传递数据，子组件通过 this.props（类组件）或直接解构（函数组件）接收。
示例代码：

// 父组件
<ChildComponent message="Hello from parent" />

// 子组件（函数式）
function ChildComponent({ message }) {
  return <div>{message}</div>;
}

子组件向父组件传递数据
父组件通过 props 传递回调函数，子组件调用该函数并传递数据。
示例代码：

// 父组件
function ParentComponent() {
  const handleData = (data) => console.log(data);
  return <ChildComponent onData={handleData} />;
}

// 子组件
function ChildComponent({ onData }) {
  return <button onClick={() => onData("Child data")}>Send</button>;
}

兄弟组件通信
通过共同的父组件作为中介，或使用状态管理工具（如 Redux、Context API）。
示例代码（通过父组件）：

// 父组件
function Parent() {
  const [data, setData] = useState("");
  return (
    <>
      <SiblingA onData={setData} />
      <SiblingB data={data} />
    </>
  );
}

跨层级组件通信（Context API）
使用 React.createContext 创建上下文，通过 Provider 和 Consumer（或 useContext）共享数据。
示例代码：

const MyContext = React.createContext();

// 提供者
function App() {
  return (
    <MyContext.Provider value="Global data">
      <Child />
    </MyContext.Provider>
  );
}

// 消费者（函数组件）
function Child() {
  const value = useContext(MyContext);
  return <div>{value}</div>;
}

全局状态管理（Redux）
适用于复杂应用，通过 store、reducer 和 action 集中管理状态。
示例代码（简化版）：

// store 配置
const store = createStore(reducer);

// 组件中获取数据
import { useSelector } from "react-redux";
function Component() {
  const data = useSelector(state => state.data);
  return <div>{data}</div>;
}

事件总线（Event Emitter）
通过自定义事件发布/订阅模式实现通信（较少使用，可能破坏 React 数据流）。
示例代码：

import EventEmitter from "events";
const eventBus = new EventEmitter();

// 发布事件
eventBus.emit("event", data);

// 订阅事件
eventBus.on("event", (data) => console.log(data));

Ref 直接访问组件
通过 ref 获取组件实例并调用其方法（类组件适用）。
示例代码：

react组件通信实现

// 父组件
class Parent extends React.Component {
  childRef = React.createRef();
  handleClick = () => this.childRef.current.doSomething();
  render() {
    return <Child ref={this.childRef} />;
  }
}

// 子组件（类组件）
class Child extends React.Component {
  doSomething() { console.log("Called"); }
  render() { return <div>Child</div>; }
}