如何实现两个React组件的状态共享与协同工作？

对于你遇到的兄弟组件（PartOne和PartTwo）之间的状态共享问题，最直接的解决方式是状态提升——将共享状态移到两个组件的共同父组件中，再通过props把状态和状态修改方法传递给子组件。

具体步骤： #

• 创建共同父组件（比如App），将chooseColor状态和setChooseColor方法放在这里
• 给PartOne组件传递修改状态的方法，让它可以触发状态变更
• 给PartTwo组件传递当前状态值，让它可以展示最新状态

修改后的完整代码： #

父组件 App.js

import { useState } from 'react';
import PartOne from './PartOne';
import PartTwo from './PartTwo';

const App = () => {
  // 把状态提升到父组件
  const [chooseColor, setChooseColor] = useState('blue');

  return (
    <div>
      {/* 给PartOne传递修改颜色的方法 */}
      <PartOne onChangeColor={() => setChooseColor('red')} />
      {/* 给PartTwo传递当前颜色状态 */}
      <PartTwo currentColor={chooseColor} />
    </div>
  );
};

export default App;

修改后的 PartOne.js

const PartOne = ({ onChangeColor }) => {
  // 不再维护自己的状态，直接使用父组件传递的方法
  return (
    <button onClick={onChangeColor}>Click here to change color</button>
  );
};

export default PartOne;

修改后的 PartTwo.js

const PartTwo = ({ currentColor }) => {
  // 修复字符串拼接错误，使用模板字符串插入变量
  const finalResult = (colorResult) => {
    return <span>The current color is {colorResult}</span>;
  };

  return (
    <div>
      {finalResult(currentColor)}
    </div>
  );
};

export default PartTwo;

补充说明： #

• 如果组件层级很深或需要多组件共享状态，可考虑使用Context API或Redux，但简单兄弟组件场景下，状态提升是最轻量化的方案。
• 原代码中PartTwo的finalResult函数存在字符串拼接错误，需用${变量名}的模板字符串语法才能正确插入变量值。

内容的提问来源于stack exchange，提问作者Victor F. Oliveira