在 React 中，组件之间传递变量的常见方法

news2025/3/31 23:44:04

- - 1. **通过 Props 传递数据**
  - 2. **通过回调函数传递数据**
  - 3. **通过 Context API 传递数据**
  - 4. **通过 Redux 管理全局状态**
  - 5. **通过事件总线（如 Node.js 的 EventEmitter）**
  - 6. **通过 Local Storage / Session Storage**
  - 7. **通过 URL 查询参数传递数据**
  - 总结

在 React 中，组件之间传递变量的常见方法有以下几种：

1. 通过 Props 传递数据

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

示例：

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

function ChildComponent({ data }) {
  return <div>{data}</div>;
}

2. 通过回调函数传递数据

父组件可以传递一个回调函数给子组件，子组件通过调用该回调函数向父组件传递数据。

示例：

function ParentComponent() {
  const [childData, setChildData] = useState("");

  const handleDataFromChild = (data) => {
    setChildData(data);
  };

  return (
    <div>
      <ChildComponent sendDataToParent={handleDataFromChild} />
      <p>Data from child: {childData}</p>
    </div>
  );
}

function ChildComponent({ sendDataToParent }) {
  return (
    <button onClick={() => sendDataToParent("Hello from Child!")}>
      Send Data to Parent
    </button>
  );
}

3. 通过 Context API 传递数据

Context API 允许你跨越组件树层级来传递数据，避免层层传递 props。

示例：

const MyContext = React.createContext();

function ParentComponent() {
  const parentData = "Data from Parent";
  
  return (
    <MyContext.Provider value={parentData}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

function ChildComponent() {
  const data = useContext(MyContext);
  return <div>{data}</div>;
}

4. 通过 Redux 管理全局状态

如果应用中需要跨多个组件共享复杂的状态，可以使用 Redux 或其他状态管理库。Redux 将状态集中在一个单一的 store 中，任何组件都可以访问和更新这些状态。

示例：

// actions.js
export const setData = (data) => ({ type: 'SET_DATA', payload: data });

// reducer.js
const initialState = { data: "" };

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'SET_DATA':
      return { ...state, data: action.payload };
    default:
      return state;
  }
}

// ParentComponent.js
import { useDispatch } from 'react-redux';
import { setData } from './actions';

function ParentComponent() {
  const dispatch = useDispatch();
  return (
    <button onClick={() => dispatch(setData("Hello from Redux!"))}>
      Send Data to Store
    </button>
  );
}

// ChildComponent.js
import { useSelector } from 'react-redux';

function ChildComponent() {
  const data = useSelector(state => state.data);
  return <div>{data}</div>;
}

5. 通过事件总线（如 Node.js 的 EventEmitter）

使用事件总线（在 React 中较少使用）也是一种传递数据的方式，尤其是在复杂的场景中。可以创建一个中央事件管理器，然后跨组件触发事件和监听事件。

这种方式通常更少用于 React 中，除非有特定的场景需求。

6. 通过 Local Storage / Session Storage

在需要多个组件或者不同页面间共享数据时，可以利用浏览器的 localStorage 或 sessionStorage，来存储数据，然后在组件中读取。

示例：

// 组件 A
useEffect(() => {
  localStorage.setItem('data', 'Hello from LocalStorage');
}, []);

// 组件 B
const data = localStorage.getItem('data');
console.log(data); // 输出: Hello from LocalStorage

7. 通过 URL 查询参数传递数据

通过 URL 的查询参数（例如，?key=value）传递数据，适用于需要在不同路由间共享数据的场景。

示例：

import { useLocation } from 'react-router-dom';

function ChildComponent() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const data = queryParams.get('data');
  
  return <div>{data}</div>;
}