Question

以下在我的功能中非常有用：

console.log(theme.colors.blues[1]);

我试图让最后一部分动态如下：

const getColor = (theme, passedColorProp) => {
  console.log(theme.colors.[passedColorProp]);
};

getColor("blues[1]");

目前正在犯错：

模块构建失败：SyntaxError：意外的令牌（15:27）**

我该如何做到这一点？

Answer 1

你几乎就在那里，除了你不需要额外的点之外，你可以动态地动态访问一个属性。

const getColor = (theme, passedColorProp) => {
  console.log(theme.colors[passedColorProp]);
};

请注意，这适用于SINGLE属性，但您不能像示例中那样嵌套它，因为您需要使用两个不同的变量：

const getColor = (theme, passedColorProp, id) => {
  console.log(theme.colors[passedColorProp][id]);
};

const theme = { colors: { blues: ['something', 'something else'] } };

getColor(theme, 'blues', 1); // 'something else'

Answer 2

将AjaxElementLocator与正则表达式一起使用以提取密钥，然后使用String.match()进行迭代以获取值：

＆＃13;

const theme = {
  colors: {
    blues: ['blue0', 'blue1']
  }
};

const getColor = (theme, passedColorProp) => {
  const keys = passedColorProp.match(/[^\[\].]+/g); // match a sequence of everything but [ ] or .
  
  return keys.reduce((r, k) => r[k], theme);
};

console.log(getColor(theme, 'colors.blues[1]'));

＆＃13;

使用JavaScript + React，如何让字符串内联评估？

2 个答案: