React组件中如何通过字符串路径获取Theme对象属性？

问题背景 #

现有如下Theme对象：

{
  palette: {
    primary: {
      main: '#dc2626',
      dark: '#7f1d1d',
      light: '#fecaca',
    },
    text: '#111827',
  }
}

以及对应的Typography组件：

const Typography = ({ color, children }) => (
  <p style={{ color: theme.palette[color] }}>{children}</p>
);

希望通过<Typography color='primary.main'>Hello world</Typography>的方式使用组件，即传入字符串路径访问Theme的嵌套属性，同时避免使用不安全的eval函数。

实现方法 #

可以写一个通用的安全路径解析函数，拆分路径字符串后逐层访问对象属性：

// 通用嵌套属性获取函数
const getNestedValue = (obj, path) => {
  return path.split('.').reduce((current, key) => {
    return current && current[key] !== undefined ? current[key] : undefined;
  }, obj);
};

// 修改后的Typography组件
const Typography = ({ color, children }) => {
  const textColor = getNestedValue(theme.palette, color);
  return <p style={{ color: textColor }}>{children}</p>;
};

这个函数会把路径字符串按.拆分，通过reduce逐层遍历对象，遇到不存在的属性时返回undefined避免报错。如果需要默认值，可以扩展函数：

const getNestedValue = (obj, path, defaultValue = null) => {
  const result = path.split('.').reduce((current, key) => {
    return current && current[key] !== undefined ? current[key] : undefined;
  }, obj);
  return result !== undefined ? result : defaultValue;
};

关于这种做法的合理性 #

这种做法不算绝对的不良实践，但要分场景看待：

• 如果路径是内部代码定义的固定值（比如开发者自己写的'primary.main'），完全安全且方便，能简化组件调用方式。
• 如果路径来自用户输入或不可信来源，则存在风险（比如恶意构造路径访问敏感属性），这种场景下要避免，或者对路径做严格的白名单校验。
• TypeScript项目中，还可以通过定义枚举或联合类型约束color参数的可选值，避免拼写错误：

type ColorPath = 'primary.main' | 'primary.dark' | 'primary.light' | 'text';

const Typography = ({ color, children }: { color: ColorPath; children: React.ReactNode }) => {
  // ...实现逻辑
};

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