将字符串转换为函数名答案

【问题标题】：Converting string to function name将字符串转换为函数名
【发布时间】：2019-11-10 12:40:09
【问题描述】：

学习 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);
    }
  };

【问题讨论】：

标签： javascript react-native

【解决方案1】：

避免使用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 似乎很奇怪。您可能会考虑查看您是否真的需要它，甚至可能发布一个新问题（不是对 this 问题的更新），并附上您认为需要它的完整背景，问你能不能避开setColor。

【讨论】：

您好，Crowder 先生，我有一个一般性的问题，我使用 firebase 存储来保存图像，我只是从选取器中获取照片 URI 并将其作为图像“.jpg”保存到 firebase对吗？
@OliverD - 我不知道。我建议用更多信息和您正在使用的代码充实这一点，并将其作为问题发布。

【解决方案2】：

如何包装设置器

// do you really need the `color` arg?
const clamped = ([value, setter]) => [value, (color, change) => {
  let w = value + change;
  if(w >= 0 && w < 255) setter(value = w);
}];

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

【讨论】：