反应：变量的状态发生变化，但 UI 图标无法更新

Question

所以我尝试创建一个简单的导航栏，它的按钮由useState控制。然而，我有一个问题，按钮图标的颜色不会更新，即使控制它的变量的状态改变。

现在，我做了一些测试，并在图标组件中添加了文本(此处未显示)，并使其与现在图标上的颜色由相同的状态控制。由于某些原因，当我这样做的时候，组件中的状态和文本都正确地改变了。有人能解释一下为什么会这样吗?因为在我看来，我似乎误解了react是如何将事物绑定到状态并控制它们的。

导航条组件

import NavButton from "./NavButton"
import { useState } from "react";
function NavBar(){
const [buttons, setButtons] = useState([
{id:1, name:"Orders", icon:"bx:bx-dollar-circle", active:false},
{id:2, name:"Menu", icon:"ic:round-restaurant-menu", active:false},
{id:3, name:"Leave", icon:"uil:exit", active:false}
]);
const toggleButton = (id) => {
setButtons(buttons.map(button => (
button.id === id ? {...button, active:!button.active} : {...button, active:false}
)))
}
return (
<div className="h-1/6 bg-white border-b-lebo flex flex-row justify-around">
<>
{buttons.map((button) => (<NavButton button={button} key={button.id} onToggle={toggleButton}/>))}
</>
</div>
)
}
export default NavBar;

导航按钮组件

import Icon from "./Icon";
function NavButton({button, onToggle}){
return (
<button onClick={() => onToggle(button.id)} className={`font-bold text-gray-500 flex flex-col items-center justify-center flex-grow w-5 hover:bg-gray-100`}>
<p className="self-center">{button.name}</p>
<Icon icon={button.icon} name={button.name} color={button.active ? "#454545" : "#8b8b8b"}/>
</button>
)
}
export default NavButton;

图标组件

function Icon({icon, color, name}) {
return (
<div>
<span color={color} className="iconify h-10 w-auto self-center" data-icon={icon}></span>
</div>
)
}
export default Icon

Answer 1

我通过创建2个不同的Icon组件来解决我的问题。Icon和IconDark，并在NavButton组件中有条件地呈现它们。不确定它是否"正确"。做事的方式，但它完成了工作。我猜它之前没有正确渲染颜色的原因是因为属性& color"在组件内部。我认为JSX只是把它作为另一个道具，在元素的第一次渲染后没有做任何事情。

编辑1:NVM显然没有完成任务。至少还不够好。渲染中的图标交换不够快，所以会导致用户看到图标交换。

编辑2:这篇文章提供了我需要的答案。

https://dev.to/abachi/how-to-change-svg-s-color-in-react-42g2

事实证明，要用react改变svg的颜色，你需要在svg组件中设置初始填充(或者对我来说是颜色)值为"current"然后有条件地从父元素传入实际值。

长话短说-控制SVG值与控制react中的文本值略有不同。