React JS Hooks中如何通过字符串形式的变量名动态访问目标变量

方案1：使用对象映射表（最推荐） #

这是最安全、兼容性最好的实现方式，不受变量作用域、打包压缩影响：
首先将所有需要动态访问的组件数组统一放到一个查找映射对象中：

// 定义查找表
const bookConfigMap = {
  bookContents: [
    <BookStart />,
    <BookForword />,
    <BookIntro />,
    <BookFirstchapter />,
    <BookSeconchapter />,
    <BookEpilogue />,
    <BookBackpage />,
  ],
  // 后续有其他需要动态访问的同类型数组，都可以在这里扩展
};

如果不想修改原有bookContents的定义，也可以直接引用原有变量构建映射：

// 原有定义不变
const bookContents = [
  <BookStart />,
  <BookForword />,
  <BookIntro />,
  <BookFirstchapter />,
  <BookSeconchapter />,
  <BookEpilogue />,
  <BookBackpage />,
];
// 构建查找表
const bookConfigMap = {
  bookContents,
};

之后直接用myDialogue.Book作为key取值即可：

// 访问数组第一项
return <div>{bookConfigMap[myDialogue.Book][0]}</div>;

// 访问数组长度
return <div>{bookConfigMap[myDialogue.Book].length}</div>;

可以增加容错逻辑避免不存在的key引发报错：

const targetContent = bookConfigMap[myDialogue.Book] ?? [];
// 后续使用targetContent即可

不推荐的方案说明 #

• 不要使用eval：存在安全风险，且生产打包时如果开启变量名压缩，会出现找不到变量的问题
• 不要使用window[myDialogue.Book]：你当前的bookContents是模块内用const定义的局部变量，不会挂载到全局window对象上，该方式不生效

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