React父组件如何修改CustomCollapse内部状态实现第三种展示样式切换

安全阿岳

2026-9-29

解决方案

第一步：修复父组件的命名冲突

你当前./FollowTelegram.js存在变量重名错误：useState已经返回了setFollowed更新函数，不可重复声明同名函数，先修正为：

// 删除原有重复的setFollowed声明，替换为以下代码
const [followed, setFollowed] = useState(false);
const handleFollow = () => {
  setFollowed(prev => !prev)
}

之后在调用CustomCollapse的位置，将followed作为参数传入组件：

<AntCollapse 
  id={styles.telegramHeader1} 
  header="Follow XXX on Telegram Announcement Channel"
  followed={followed} // 新增该行传递状态
>
{/* 其余内容不变，仅修改Continue按钮的触发事件 */}
<Button onClick={handleFollow} style={buttonStyle2} disabled={clicked}>Continue</Button>

第二步：修改CustomCollapse适配三种样式逻辑

在./CustomCollapse.js中新增对followed参数的判断，优先匹配第三种样式规则：

const CustomCollapse = (props) => {
  const [disabled, setDisabled] = useState(true);
  // 自定义第三种样式的渲染内容，可根据需求修改
  const renderFollowedStyle = () => {
    return <div>你需要的第三种样式UI</div>
  }
  return (
    <StyledCollapse onChange={() => setDisabled(prev => !prev)}>
      <AntCollapse.Panel
        header={props.header}
        key="1"
        showArrow={false}
        bordered={false}
        extra={
          <span>
            <span style={{ color: "#0076de", float: "right" }}>
              {/* 新增优先级判断：followed为true时优先渲染第三种样式 */}
              {props.followed ? renderFollowedStyle() : (
                disabled ? <div id={styles.themeBox}><p>+10</p></div> : <img src={arrowDownIcon} alt="" style={{height:'1.2em', marginRight:'10px', width:'auto', objectFit:'contain'}} />
              )}
            </span>
          </span>
        }
      >
        {props.children}
      </AntCollapse.Panel>
    </StyledCollapse>
  );
};