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