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

相关推荐
野槐2 分钟前
前端图像处理(一)
前端
程序猿阿伟9 分钟前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒11 分钟前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪19 分钟前
AJAX的基本使用
前端·javascript·ajax
力透键背22 分钟前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M33 分钟前
node.js第三方Express 框架
前端·javascript·node.js·express
weiabc33 分钟前
学习electron
javascript·学习·electron
盛夏绽放41 分钟前
Node.js 和 Socket.IO 实现实时通信
前端·后端·websocket·node.js
想自律的露西西★1 小时前
用el-scrollbar实现滚动条,拖动滚动条可以滚动,但是通过鼠标滑轮却无效
前端·javascript·css·vue.js·elementui·前端框架·html5
白墨阳1 小时前
vue3:瀑布流
前端·javascript·vue.js