React.js中如何实现兄弟组件间的状态（Prop）传递？

嘿，别担心，刚接触React和JavaScript遇到这种状态传递的问题太正常啦！咱们一步步来梳理可行的解决方案～

方案1：状态提升（React官方推荐的基础方案） #

这是最适合新手理解的方法，核心思路是把需要共享的状态从子组件提升到它们共同的父组件中，父组件再通过props把状态传递给所有需要的子组件，同时传递修改状态的方法给原持有状态的组件（也就是你的OlderSibling）。

具体步骤&代码示例： #

1. 修改父组件，把currentCity状态和更新方法移到这里：

import React, { Component } from 'react';
import OlderSibling from './OlderSibling';
import YoungerSibling from './YoungerSibling'; // 你的其他兄弟组件

export default class ParentComponent extends Component {
  state = {
    currentCity: '' // 初始值可以根据需求设置
  };

  // 定义更新currentCity的方法，传给OlderSibling
  updateCurrentCity = (newCity) => {
    this.setState({ currentCity: newCity });
  };

  render() {
    return (
      <div>
        {/* 把状态和更新方法传给OlderSibling */}
        <OlderSibling 
          currentCity={this.state.currentCity}
          updateCurrentCity={this.updateCurrentCity}
        />
        {/* 把currentCity传给其他兄弟组件 */}
        <YoungerSibling currentCity={this.state.currentCity} />
      </div>
    );
  }
}

2. 修改OlderSibling组件，不再自己持有状态，而是通过props接收并修改：

import React, { Component } from 'react';

export default class OlderSibling extends Component {
  // 假设原来获取city的逻辑在这里，拿到后调用父组件传的方法更新状态
  componentDidMount() {
    // 模拟获取city的过程
    const fetchedCity = '北京'; // 替换成你实际的获取逻辑
    this.props.updateCurrentCity(fetchedCity);
  }

  render() {
    return (
      <div>当前城市：{this.props.currentCity}</div>
    );
  }
}

3. 其他兄弟组件直接通过props接收状态：

import React from 'react';

const YoungerSibling = ({ currentCity }) => {
  return (
    <div>兄弟组件拿到的城市：{currentCity}</div>
  );
};

export default YoungerSibling;

方案2：使用React Context（适合多组件共享/跨层级传递） #

如果你的项目里有很多组件需要用到这个currentCity状态，或者组件层级比较深，不想层层传递props，可以用React的Context API来实现全局共享。

具体步骤&代码示例： #

1. 创建Context文件（比如CityContext.js）：

import React, { createContext, Component } from 'react';

// 创建Context
const CityContext = createContext();

// 创建Provider组件，包裹需要共享状态的组件树
class CityProvider extends Component {
  state = {
    currentCity: ''
  };

  updateCurrentCity = (newCity) => {
    this.setState({ currentCity: newCity });
  };

  render() {
    return (
      <CityContext.Provider 
        value={{
          currentCity: this.state.currentCity,
          updateCurrentCity: this.updateCurrentCity
        }}
      >
        {this.props.children}
      </CityContext.Provider>
    );
  }
}

export { CityContext, CityProvider };

2. 在父组件外层包裹Provider：

import React from 'react';
import { CityProvider } from './CityContext';
import OlderSibling from './OlderSibling';
import YoungerSibling from './YoungerSibling';

export default function App() {
  return (
    <CityProvider>
      <OlderSibling />
      <YoungerSibling />
    </CityProvider>
  );
}

3. 在OlderSibling中使用Context（Class组件写法）：

import React, { Component } from 'react';
import { CityContext } from './CityContext';

export default class OlderSibling extends Component {
  static contextType = CityContext;

  componentDidMount() {
    const fetchedCity = '上海'; // 替换成你的获取逻辑
    this.context.updateCurrentCity(fetchedCity);
  }

  render() {
    return (
      <div>当前城市：{this.context.currentCity}</div>
    );
  }
}

4. 在其他兄弟组件中使用Context（函数组件写法）：

import React, { useContext } from 'react';
import { CityContext } from './CityContext';

const YoungerSibling = () => {
  const { currentCity } = useContext(CityContext);
  return (
    <div>兄弟组件拿到的城市：{currentCity}</div>
  );
};

export default YoungerSibling;

方案3：状态管理库（适合大型项目） #

如果你的项目规模比较大，有大量需要共享的状态，推荐使用专门的状态管理库，比如Zustand（轻量易上手，适合新手）或者Redux Toolkit（React生态最常用的）。

以Zustand为例，简单示例：

1. 安装Zustand：

npm install zustand

2. 创建store：

import { create } from 'zustand';

const useCityStore = create((set) => ({
  currentCity: '',
  updateCurrentCity: (newCity) => set({ currentCity: newCity })
}));

export default useCityStore;

3. 在组件中使用：

// OlderSibling组件
import React, { useEffect } from 'react';
import useCityStore from './useCityStore';

const OlderSibling = () => {
  const updateCurrentCity = useCityStore((state) => state.updateCurrentCity);
  
  useEffect(() => {
    const fetchedCity = '广州';
    updateCurrentCity(fetchedCity);
  }, [updateCurrentCity]);

  return <div>当前城市：{useCityStore((state) => state.currentCity)}</div>;
};

// 其他兄弟组件
import useCityStore from './useCityStore';

const YoungerSibling = () => {
  const currentCity = useCityStore((state) => state.currentCity);
  return <div>兄弟组件拿到的城市：{currentCity}</div>;
};

总结 #

作为新手，我推荐你先从状态提升开始尝试，这个方法最基础，也能帮你理解React中状态流动的核心逻辑。如果之后发现项目需要更灵活的状态共享，再考虑Context或者状态管理库就好～

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