React + JavaScript中如何动态解析字符串访问对象属性？

首先，咱们先拆解你代码里的两个核心问题：

1. 语法错误：theme.colors.[passedColorProp]里多了个多余的.，JavaScript中动态属性访问的正确写法是obj[propName]，所以这里得改成theme.colors[passedColorProp]——不过这只是第一步，因为你传的"blues[1]"是复合路径，直接这么访问还是拿不到目标值。
2. 参数传递错误：你调用getColor("blues[1]")时只传了一个参数，但函数定义需要两个（theme对象和颜色路径），第一个参数必须是你的主题对象才行。

接下来咱们一步步实现你要的需求：传入类似"blues[1]"的路径字符串，动态获取theme.colors.blues[1]的值。

方案一：针对数组索引路径的简单解析 #

如果你的颜色路径都是"颜色组[索引]"这种固定格式，可以直接用正则解析字符串提取属性名和索引：

// 先假设你的theme对象结构如下
const theme = {
  colors: {
    blues: ['#e6f2ff', '#99ccff', '#3399ff'],
    reds: ['#ffe6e6', '#ff9999', '#ff3333']
  }
};

const getColor = (theme, colorPath) => {
  // 用正则匹配出属性名和索引，比如"blues[1]"会匹配出"blues"和"1"
  const pathMatch = colorPath.match(/^(\w+)\[(\d+)\]$/);
  
  if (pathMatch) {
    const [_, colorGroup, index] = pathMatch;
    // 先获取颜色组数组，再取对应索引的元素（可选链操作符避免报错）
    const targetColor = theme.colors[colorGroup]?.[index];
    console.log(targetColor);
    return targetColor;
  }
  
  // 兼容直接传属性名的情况，比如"primary"
  const directColor = theme.colors[colorPath];
  console.log(directColor);
  return directColor;
};

// 正确调用：第一个参数是theme对象，第二个是路径字符串
getColor(theme, "blues[1]"); // 输出theme.colors.blues[1]的值

方案二：通用嵌套属性访问（支持复杂路径） #

如果以后需要处理更复杂的嵌套路径（比如"shades.dark.blues[2]"），可以写一个通用工具函数解析任意格式的路径：

const getNestedValue = (obj, path) => {
  // 把类似"blues[1]"的路径转换成["blues", "1"]的数组
  const pathSegments = path.replace(/\[(\d+)\]/g, '.$1').split('.');
  // 逐层遍历对象获取值，可选链操作符避免中途报错
  return pathSegments.reduce((currentValue, segment) => {
    return currentValue?.[segment] ?? undefined;
  }, obj);
};

const getColor = (theme, colorPath) => {
  const targetColor = getNestedValue(theme.colors, colorPath);
  console.log(targetColor);
  return targetColor;
};

// 调用示例
getColor(theme, "blues[1]"); // 输出theme.colors.blues[1]
getColor(theme, "reds[0]"); // 输出theme.colors.reds[0]

为什么你原来的代码报错？ #

• 开头的语法错误是因为theme.colors.[passedColorProp]不符合JS语法规则：.后面只能跟合法标识符，动态属性必须用[]包裹，且不需要前面的.。
• 调用函数时少传了theme参数，导致函数内部的theme变成了"blues[1]"字符串，而非你的主题对象，这也会引发后续的属性访问错误。

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