React/JSX中如何通过字符串引用已导入的常量？

这问题我之前也碰到过，核心是你没法直接通过字符串去引用单独的变量，最优雅的解决方式是创建一个键值对映射对象，把你要传入的prop名称和对应的动画数据关联起来，这样就能轻松通过字符串获取对应的值了。

步骤1：创建动画映射对象 #

先把所有导入的动画数据整理到一个对象里，键就是你要通过prop传入的名称（比如'wallet'），值就是对应的导入变量：

import building from '../../../public/lotties/building.json'
import chest from '../../../public/lotties/chest.json'
import clock from '../../../public/lotties/clock.json'
import creditcard from '../../../public/lotties/creditcard.json'
import dnalottie from '../../../public/lotties/dna.json'
import engineering from '../../../public/lotties/engineering.json'
import handshake from '../../../public/lotties/handshake.json'
import hospital from '../../../public/lotties/hospital.json'
import map from '../../../public/lotties/map.json'
import navpinsfalling from '../../../public/lotties/navpinsfalling.json'
import radar from '../../../public/lotties/radar.json'
import rocket from '../../../public/lotties/rocket.json'
import student from '../../../public/lotties/student.json'
import teacher from '../../../public/lotties/teacher.json'
import tree from '../../../public/lotties/tree.json'
import trophy from '../../../public/lotties/trophy.json'
import virus from '../../../public/lotties/virus.json'
import wallet from '../../../public/lotties/wallet.json'

// 构建映射对象，注意dnalottie这里我们把键设为'dna'，方便传prop时用更简洁的名称
const animationMap = {
  building,
  chest,
  clock,
  creditcard,
  dna: dnalottie,
  engineering,
  handshake,
  hospital,
  map,
  navpinsfalling,
  radar,
  rocket,
  student,
  teacher,
  tree,
  trophy,
  virus,
  wallet
}

步骤2：在组件中通过prop获取对应动画数据 #

现在在你的GenericLottie组件里，就可以直接通过props.name从映射对象中取出对应的动画数据了：

类组件写法 #

class GenericLottie extends React.Component {
  render() {
    // 通过映射对象获取对应动画数据
    const animData = animationMap[this.props.name];
    
    // 可选：处理不存在的名称，避免报错
    if (!animData) {
      console.warn(`找不到名为${this.props.name}的动画数据，请检查prop是否正确`);
      // 可以返回一个默认动画或者空组件
      return null;
    }
    
    return (
      // 这里用animData渲染你的Lottie组件
      <Lottie animationData={animData} />
    );
  }
}

函数组件写法 #

const GenericLottie = ({ name }) => {
  const animData = animationMap[name];
  
  if (!animData) {
    console.warn(`找不到名为${name}的动画数据，请检查prop是否正确`);
    return null;
  }
  
  return <Lottie animationData={animData} />;
}

为什么你之前的写法无效？ #

• const animData = this.props.name;：这里拿到的只是字符串（比如'wallet'），不是你导入的wallet变量对应的JSON数据。
• const animData = {this.props.name};：这是错误的对象语法，即使改成{[this.props.name]: ...}，也只是创建了一个键为传入字符串的对象，不是你要的动画数据。
• const animData = ${this.props.name};：这只是把prop值转成了模板字符串，本质还是字符串，无法引用对应变量。

额外优化：动态导入（可选） #

如果你的动画文件很多，不想一次性全部导入，可以考虑用动态导入的方式，在组件中根据prop名称按需加载：

const GenericLottie = ({ name }) => {
  const [animData, setAnimData] = useState(null);
  
  useEffect(() => {
    // 动态加载对应的JSON文件
    import(`../../../public/lotties/${name}.json`)
      .then(module => setAnimData(module.default))
      .catch(err => console.warn(`加载动画${name}失败：`, err));
  }, [name]);
  
  if (!animData) {
    return <div>加载中...</div>;
  }
  
  return <Lottie animationData={animData} />;
}

这种方式的好处是只加载当前需要的动画，减少初始打包体积，但要注意文件名和prop名称必须完全一致（比如prop传'dna'，对应的文件必须是dna.json，而不是之前的dnalottie.json，需要调整文件名或者适配路径）。

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