React Ant Design折叠组件子组件触发父组件多次重渲染失效问题求助

嗨，我看了你的代码，发现问题主要出在全局变量的使用和父组件重渲染的触发逻辑上，导致点击按钮只有第一次能生效，后续点击无法同步更新状态和视图。下面我帮你拆解问题并给出修复方案：

问题根源 #

1. 全局变量无法触发React重渲染：你用了let value1 = false;这类全局变量存储按钮状态，React组件不会监听全局变量的变化，所以即使你修改了这些变量，组件也不会自动重新渲染更新视图。
2. 父组件重渲染逻辑失效：你通过props.callBack(true)触发父组件的setReload(true)，但React的useState setter如果传入和当前状态相同的值（这里一直传true），会被React跳过重渲染，所以第一次点击后，后续调用都不会让父组件更新，导致Element2里的状态和按钮颜色都无法同步。

修复方案：状态提升+正确使用React State #

最标准的React做法是把共享状态提升到共同的父组件（也就是CollapseComponent），用useState管理状态，这样状态变化会自动触发所有依赖该状态的子组件重渲染，不需要手动触发回调。

修复后的完整代码 #

import React from 'react';
import type { CollapseProps } from 'antd';
import { Collapse, Button, Space } from 'antd';
import { useState } from "react";

// 子组件1：接收父组件的状态和更新方法
const Element1 = (props: {
  values: { value1: boolean; value2: boolean; value3: boolean };
  onButtonClick: (key: 1 | 2 | 3) => void;
}) => {
  const { values, onButtonClick } = props;

  return (
    <div>
      <Space>
        <Button
          onClick={() => onButtonClick(1)}
          color={!values.value1 ? "primary" : "danger"}
          variant="solid"
        >
          Button1
        </Button>
        <Button
          onClick={() => onButtonClick(2)}
          color={!values.value2 ? "primary" : "danger"}
          variant="solid"
        >
          Button2
        </Button>
        <Button
          onClick={() => onButtonClick(3)}
          color={!values.value3 ? "primary" : "danger"}
          variant="solid"
        >
          Button3
        </Button>
      </Space>
    </div>
  );
};

// 子组件2：接收父组件的状态并展示
const Element2 = (props: {
  values: { value1: boolean; value2: boolean; value3: boolean };
}) => {
  const { values } = props;
  return (
    <div>
      <p>value1 <b>{values.value1.toString()}</b></p>
      <p>value2 <b>{values.value2.toString()}</b></p>
      <p>value3 <b>{values.value3.toString()}</b></p>
    </div>
  );
};

const CollapseComponent: React.FC = () => {
  // 把共享状态提升到父组件，用useState管理
  const [values, setValues] = useState({
    value1: false,
    value2: false,
    value3: false,
  });

  // 处理按钮点击的逻辑：更新对应状态
  const handleButtonClick = (key: 1 | 2 | 3) => {
    setValues(prev => ({
      ...prev,
      [`value${key}`]: true,
    }));
  };

  const items: CollapseProps['items'] = [
    {
      key: '1',
      label: 'Element1',
      children: <Element1 values={values} onButtonClick={handleButtonClick} />,
    },
    {
      key: '2',
      label: 'Element2',
      children: <Element2 values={values} />,
    },
  ];

  return <Collapse items={items} />;
};

export default CollapseComponent;

关键修改点说明 #

1. 状态提升到父组件：把原本的全局变量value1/value2/value3改成父组件的useState状态，这样状态变化会自动触发父组件和所有依赖该状态的子组件重渲染。
2. 子组件通过props接收状态和更新方法：
   • Element1接收父组件的values状态来控制按钮颜色，点击按钮时调用父组件的handleButtonClick更新状态。
   • Element2接收父组件的values状态来展示最新的布尔值。
3. 移除无效的重渲染回调：不再需要callBack(true)这类手动触发重渲染的逻辑，因为React会自动监听useState的状态变化，同步更新所有相关组件。

这样修改后，每次点击按钮都会立刻切换成危险色，同时第二个标签页里的对应值也会同步变成true，而且支持多次点击所有按钮都生效~

内容来源于stack exchange