React 组件通信-案例

React 组件通信是构建复杂应用的核心部分,涉及到不同组件之间的数据传递和事件处理。以下提供了相应的案例代码。

1. 父组件向子组件传递数据(父传子)

父组件通过 props 向子组件传递数据。

jsx 复制代码
// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

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

export default ParentComponent;

// ChildComponent.js
import React from 'react';

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

export default ChildComponent;

2. 子组件向父组件传递数据(子传父)

子组件通过回调函数向父组件传递数据。

jsx 复制代码
// ParentComponent.js
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [message, setMessage] = useState("");

  const handleMessageChange = (newMessage) => {
    setMessage(newMessage);
  };

  return (
    <div>
      <ChildComponent onMessageChange={handleMessageChange} />
      <p>Message from child: {message}</p>
    </div>
  );
}

export default ParentComponent;

// ChildComponent.js
import React from 'react';

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

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

export default ChildComponent;

3. 兄弟组件之间的通信

通过共同的父组件作为中介,将数据或回调函数传递给兄弟组件。

jsx 复制代码
// ParentComponent.js
import React, { useState } from 'react';
import FirstSibling from './FirstSibling';
import SecondSibling from './SecondSibling';

function ParentComponent() {
  const [message, setMessage] = useState("");

  const handleMessageChange = (newMessage) => {
    setMessage(newMessage);
  };

  return (
    <div>
      <FirstSibling onMessageChange={handleMessageChange} />
      <SecondSibling message={message} />
    </div>
  );
}

export default ParentComponent;

// FirstSibling.js
import React from 'react';

function FirstSibling({ onMessageChange }) {
  const handleChange = (e) => {
    onMessageChange(e.target.value);
  };

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

export default FirstSibling;

// SecondSibling.js
import React from 'react';

function SecondSibling({ message }) {
  return <p>Message from FirstSibling: {message}</p>;
}

export default SecondSibling;

4. 跨层级组件通信

使用 Context API 或者全局状态管理库(如 Redux)进行跨层级组件通信。

使用 Context API
jsx 复制代码
// ThemeContext.js
import React, { createContext, useState, useContext } from 'react';

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  return useContext(ThemeContext);
}

// App.js
import React from 'react';
import { ThemeProvider } from './ThemeContext';
import ChildComponent from './ChildComponent';

function App() {
  return (
    <ThemeProvider>
      <ChildComponent />
    </ThemeProvider>
  );
}

export default App;

// ChildComponent.js
import React from 'react';
import { useTheme } from './ThemeContext';

function ChildComponent() {
  const { theme, setTheme } = useTheme();

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
  };

  return (
    <div>
      <p>Current theme: {theme}</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

export default ChildComponent;

5. 使用第三方库进行通信

使用第三方库如 redux 进行全局状态管理,实现任意组件之间的通信。

  • 暂无案例

这些例子展示了在 React 中常见的不同组件通信方式,根据实际场景选择合适的通信方式能够有效提高代码的可维护性和可扩展性。

相关推荐
遂心_1 小时前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制
前端·javascript
IT_陈寒1 小时前
JavaScript 性能优化:5 个被低估的 V8 引擎技巧让你的代码快 200%
前端·人工智能·后端
王同学QaQ2 小时前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
岛风风2 小时前
关于手机的设备信息
前端
小仙女喂得猪2 小时前
2025 Android原生开发者角度的React/ReactNative 笔记整理
react native·react.js
ReturnTrue8682 小时前
nginx性能优化之Gzip
前端
程序员鱼皮3 小时前
刚刚 Java 25 炸裂发布!让 Java 再次伟大
java·javascript·计算机·程序员·编程·开发·代码
w_y_fan3 小时前
Flutter 滚动组件总结
前端·flutter
wuli金居哇3 小时前
我用 Turborepo 搭了个 Monorepo 脚手架,开发体验直接起飞!
前端
Asort3 小时前
JavaScript 从零开始(五):运算符和表达式——从零开始掌握算术、比较与逻辑运算
前端·javascript