如何使用react-color-palette手动重新分配color的值？

问题原因 #

你用var colorinuse这种普通变量存储颜色是无效的——React不会监听普通变量的变化，就算你修改了它的值，组件也不会重新渲染，取色器自然不会更新显示新颜色。

正确做法 #

react-color-palette提供的useColor钩子已经帮你管理了颜色状态，直接用它返回的setColor函数就能修改颜色，同时自动同步取色器的显示：

示例1：通过按钮点击手动修改颜色 #

import { useColor, ColorPicker } from "react-color-palette";

function ColorPickerDemo() {
  // 用useColor初始化颜色状态，初始值设为#000000
  const [color, setColor] = useColor("#000000");

  // 自定义函数：修改颜色为红色
  const changeToRed = () => {
    // 调用setColor更新状态，取色器会自动同步
    setColor("#ff0000");
  };

  return (
    <div>
      <ColorPicker color={color} onChange={setColor} />
      {/* 点击按钮触发颜色修改 */}
      <button onClick={changeToRed}>切换为红色</button>
    </div>
  );
}

示例2：从外部数据源同步颜色 #

如果你的颜色需要从父组件、接口返回值等外部来源获取，用useEffect监听外部值的变化，再调用setColor同步：

import { useColor, ColorPicker } from "react-color-palette";
import { useEffect } from "react";

function ColorPickerDemo({ externalColor }) {
  const [color, setColor] = useColor("#000000");

  // 当外部传入的externalColor变化时，同步到取色器
  useEffect(() => {
    setColor(externalColor);
  }, [externalColor, setColor]);

  return <ColorPicker color={color} onChange={setColor} />;
}

核心要点 #

• 不要用普通变量管理需要同步到组件的状态，依赖useColor返回的状态和更新函数即可
• 任何时候想修改颜色，都要调用setColor——只有这样React才会触发组件重新渲染，让取色器显示新颜色

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