Next.js函数组件状态管理：如何实现兄弟组件间单状态变量共享

针对你只有1个状态需要在兄弟组件间共享的场景，优先采用状态提升方案实现，无需引入额外状态管理库，也不会破坏原子设计的分层职责。

实现逻辑：将共享状态从Component1中提升到两个兄弟组件的共同父组件（即Index页面组件）托管，将状态修改方法传给Component1调用，状态值传给控制渲染的Component2容器组件即可，具体代码实现如下：

1. 父组件（index.tsx）代码 #

import { useState, ReactElement } from 'react';
import Component1 from './Component1';
import ComponentRendered from './ComponentRendered';
import OtherComponents from './OtherComponents';

const Index = (): ReactElement => {
  // 共享状态提升到共同父级托管
  const [component1Value, setComponent1Value] = useState(false);

  return (
    <div>
      <Component1 onValueChange={setComponent1Value} />
      <ComponentRendered component1Value={component1Value} />
      <OtherComponents />
    </div>
  );
};

export default Index;

2. Component1 组件代码 #

import { ReactElement, Dispatch, SetStateAction } from 'react';

// TS 类型定义
type Component1Props = {
  onValueChange: Dispatch<SetStateAction<boolean>>;
};

const Component1 = ({ onValueChange }: Component1Props): ReactElement => {
  // 内部需要修改共享状态时，调用父级传入的onValueChange方法即可
  const handleToggle = () => {
    onValueChange(prev => !prev);
  };

  return (
    <div onClick={handleToggle}>
      Component 1 代码
    </div>
  );
};

export default Component1;

3. ComponentRendered（组件2容器）代码 #

import { ReactElement } from 'react';

// TS 类型定义
type ComponentRenderedProps = {
  component1Value: boolean;
};

const ComponentRendered = ({ component1Value }: ComponentRenderedProps): ReactElement => {
  const component2 = (
    <div>Component 2 代码</div>
  );

  return component1Value ? component2 : <></>;
};

export default ComponentRendered;

方案优势 #

• 逻辑轻量无额外依赖，完全匹配单状态共享的需求
• 符合TypeScript类型规范，所有入参都有明确类型定义
• 适配原子设计架构：底层原子/分子组件仅保留渲染逻辑，状态由上层页面层统一托管，不破坏组件复用性
• 完全兼容现有styled-components样式逻辑，无需修改现有样式代码

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