React中如何将变量传递到另一个组件？

方案一：提升状态到共同父组件 #

这是组件传值最基础的方式，把需要共享的变量定义在两个组件的共同父组件中，再通过props分别传递给子组件。

// 共同父组件
const ParentComponent = () => {
  const value = "test"; // 共享变量放在父组件里

  return (
    <div>
      <Filter value={value} />
      <Home value={value} />
    </div>
  );
};

// 修改后的Filter组件
const Filter = ({ value }) => {
  return <h1>you are watching {value}</h1>;
};

// 修改后的Home组件
const Home = ({ value }) => {
  return <h1>you are watching {value}</h1>;
};

如果后续需要修改value的值，只需在父组件用useState定义状态，再把修改方法通过props传给子组件即可。

方案二：使用React Context API #

如果两个组件层级较深、没有直接的共同父组件，或者需要全局共享这个变量，用Context API最合适。

import { createContext, useContext } from 'react';

// 创建Context实例
const ValueContext = createContext();

// 封装Provider组件，提供共享值
const ValueProvider = ({ children }) => {
  const value = "test";
  return (
    <ValueContext.Provider value={value}>
      {children}
    </ValueContext.Provider>
  );
};

// Filter组件：通过useContext获取共享值
const Filter = () => {
  const value = useContext(ValueContext);
  return <h1>you are watching {value}</h1>;
};

// Home组件：同样用useContext获取共享值
const Home = () => {
  const value = useContext(ValueContext);
  return <h1>you are watching {value}</h1>;
};

// 在应用入口用Provider包裹需要共享值的组件
const App = () => {
  return (
    <ValueProvider>
      <Filter />
      <Home />
    </ValueProvider>
  );
};

方案三：使用状态管理工具（以Zustand为例） #

如果项目中有大量需要跨组件共享的状态，用轻量的状态管理工具会更高效，比如Zustand。

// 先安装依赖：npm install zustand
import { create } from 'zustand';

// 创建状态仓库
const useValueStore = create((set) => ({
  value: "test",
  // 可选：添加修改状态的方法
  setValue: (newValue) => set({ value: newValue })
}));

// Filter组件获取状态
const Filter = () => {
  const value = useValueStore(state => state.value);
  return <h1>you are watching {value}</h1>;
};

// Home组件获取状态
const Home = () => {
  const value = useValueStore(state => state.value);
  return <h1>you are watching {value}</h1>;
};

内容的提问来源于stack exchange，提问作者amghare