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 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
甜瓜看代码3 小时前
1.
react.js·node.js·angular.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app