React点击react-icons仅变色不切换静态JSON内容问题求解

你代码中的handleClick是柯里化函数，调用handleClick("rings")仅会返回一个待执行的新函数，并不会实际触发props.setSelectedIcon更新父组件状态，因此JSON内容没有切换。而背景色切换的changeBGColor是直接执行的，所以单独生效。

方案1：修改handleClick为普通函数（推荐） #

去掉handleClick外层返回函数的包装，改为普通直接执行的函数：

// 原柯里化写法注释掉
// const handleClick = (messageKey) => () => props.setSelectedIcon(messageKey);
// 修改为普通函数
const handleClick = (messageKey) => {
  props.setSelectedIcon(messageKey)
}

onClick中的原有调用逻辑不需要改动即可生效。

方案2：调用时执行返回的函数 #

如果不想修改handleClick的定义，就在调用时加括号执行其返回的函数：

<GiLinkedRings
  className="rings"
  onClick={() => {
    handleClick("rings")(); // 新增括号执行返回的函数
    changeBGColor(1);
  }}
  // 其余属性保持不变
/>

另一个图标的onClick也做同样修改即可。

注意：请确认父组件已经正确维护了selectedIcon公共状态，并且将selectedIcon传给IconMessage组件、将setSelectedIcon传给Icon组件，父组件示例写法参考：

import React, { useState } from 'react'
import Icon from './Icon'
import IconMessage from './IconMessage'

function ParentComponent() {
  const [selectedIcon, setSelectedIcon] = useState('rings') // 可设置默认选中项
  return (
    <div>
      <Icon setSelectedIcon={setSelectedIcon} selectedIcon={selectedIcon} />
      <IconMessage selectedIcon={selectedIcon} />
    </div>
  )
}

背景色状态bg可以直接和选中的图标key绑定，不需要单独维护1/2的枚举值，后续新增图标不需要额外修改枚举逻辑，也能避免选中状态和背景色状态不同步的问题：

function Icon(props) {
  // 移除内部的bg状态，直接用父组件传入的selectedIcon判断选中状态
  return (
    <div className="icon-arrow">
      {/* 其余结构不变 */}
      <div className="icons">
        <GiLinkedRings
          className="rings"
          onClick={() => props.setSelectedIcon("rings")}
          style={{
            backgroundColor: props.selectedIcon === "rings" ? "#e3e1dc" : "#ae7a67",
          }}
        />
        <BsFillPeopleFill
          className="family"
          onClick={() => props.setSelectedIcon("family")}
          style={{
            backgroundColor: props.selectedIcon === "family" ? "#e3e1dc" : "#ae7a67",
          }}
        />
      </div>
    </div>
  );
}

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