javascript - 将字符串转换为函数名称

学习React Native。尝试将字符串转换为函数名称。收到错误消息“ func不是函数。func未定义”。请需要帮助。最终目标是创建一个具有背景色的视图，并具有用于增加/减少RGB值的按钮

  const [red, setRed] = useState(0);
  const [green, setGreen] = useState(0);
  const [blue, setBlue] = useState(0);

  const setColor = (color, change) => {
    // color === "red", "green", "blue"
    // change === +10, -10
    const colorCapitalized = color.charAt(0).toUpperCase() + color.slice(1);
    var stateMethod = 'set' + colorCapitalized;
    var func = window[stateMethod];

    if (color + change > 255 || color + change < 0) {
      return;
    } else {
      func(color + change);
    }
  };

最佳答案

避免使用window对象（或通常使用全局变量）。您当然不能将它与setRed等局部变量一起使用。

如果您确实想这样做，请将函数放在对象上：

const setters = {
    red: setRed,
    green: setGreen,
    blue: setBlue
};

然后使用color对其进行索引：

const setter = setters[color];
setter(color + change);

甚至

setters[color](color + change);

您也可以对值进行相同的操作。然后，您的setColor变得简单得多（特别是如果我们只做一次数学运算并重用结果）：

const [red, setRed] = useState(0);
const [green, setGreen] = useState(0);
const [blue, setBlue] = useState(0);
const setters = {
    red: setRed,
    green: setGreen,
    blue: setBlue
};
const values = {
    red,
    green,
    blue
};

const setColor = (color, change) => {
  const update = values[color] + change;
  if (update >= 0 && update <= 255) {
    setters[color](update);
  }
};

也就是说，需要setColor似乎很奇怪。您可能要考虑自己是否真正需要它，甚至可能发布一个新问题（而不是对该问题的更新），并附上您为什么认为需要它的完整上下文，询问是否可以避免使用setColor。