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 中常见的不同组件通信方式,根据实际场景选择合适的通信方式能够有效提高代码的可维护性和可扩展性。

相关推荐
懒懒是个程序员4 分钟前
layui时间范围
前端·javascript·layui
NoneCoder6 分钟前
HTML响应式网页设计与跨平台适配
前端·html
凯哥19709 分钟前
在 Uni-app 做的后台中使用 Howler.js 实现强大的音频播放功能
前端
烛阴12 分钟前
面试必考!一招教你区分JavaScript静态函数和普通函数,快收藏!
前端·javascript
GetcharZp14 分钟前
xterm.js 终端神器到底有多强?用了才知道!
前端·后端·go
JiangJiang18 分钟前
🚀 React 弹窗还能这样写?手撸一个高质量 Modal 玩起来!
前端·javascript·react.js
吃炸鸡的前端32 分钟前
el-transfer穿梭框数据量过大的解决方案
前端·javascript
高德开放平台1 小时前
文末有奖|高德MCP 2.0 出行领域首发打通大模型与高德地图APP互联
前端
苳烨1 小时前
UniApp使用最新版Android Studio本地离线打包全流程
前端
Monly211 小时前
vue报错:Loading chunk * failed,vue-router懒加载出错问题。
前端·javascript·vue.js