React中导入导出含模板字面量的变量无法动态取值的解决方案

JS 模板字面量会在定义时立即执行求值，你在导出文件中初始化 my_questions 数组时，question 字段就已经被拼接为固定字符串 What is temporary's favorite animal?。后续导入使用时，数组内的字符串已经固定，和组件传入的 name 参数没有关联，因此不会动态更新。

将需要动态拼接的 question 字段改为函数形式，使用时传入参数即可得到动态生成的字符串。

1. 修改导出文件代码 #

// 移除文件内固定的name变量，将question改为接收参数的函数
export const my_questions = [
  {
    id: 0,
    question: (name) => `What is ${name}'s favorite animal?`,
    alternative: [
      { answers: "Cat", img: "href" },
      { answers: "Dog", img: "href" },
      { answers: "Bird", img: "href" },
    ]
  }
]

export default {
  my_questions
}

2. 修改业务组件调用逻辑 #

渲染时传入组件拿到的 name 参数，执行 question 函数得到动态内容：

import {my_questions} from './data/data_questions'

function App(){
 const TemplateTest = ({name, my_questions}) => {
    return (
      <>
         { my_questions.map(x => <p>{x.question(name)}</p>) }
      </>
    )
  }

   return (
     <div>
        <TemplateTest name="Rusty" my_questions={my_questions}/>
        {/* 输出结果为 What is Rusty's favorite animal? */}
     </div>
   )
}

如果后续有多个动态参数需要传入，可以将函数参数改为对象形式，比如 question: ({name, age}) => ${name} is ${age} years old``，调用时传入对应参数对象即可。

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