有沒有辦法在 javascript/JSX（React 框架）中使用字符串來引用常量

Question

 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'

我有一個 GenericLottie 組件，我想傳入一個像“錢包”這樣的道具並引用導入的常量。

 const animData = this.props.name; // const animData = {this.props.name}; // const animData = `${this.props.name}`;

我已經嘗試了上述所有代碼行，但都不起作用。 很明顯，我需要查看字符串文字及其工作方式。 我的問題有解決方法嗎？ 如果沒有，我可以通過並單獨編寫每個代碼，我不想這樣做。

Answer 1

我想你想做的是這個嗎？ 使用功能組件，而不是階級寫的，所以沒有必要為this引用道具時。

SomeOtherComponent.js

import wallet from '../../../public/lotties/wallet.json';
import GenericLottie from '../../wherever';

const SomeOtherComponent = () => {
  return <GenericLottie name={wallet} />;
};

GenericLottie.js

const GenericLottie = (props) => {
  // This should be the 'wallet' you imported in the parent component!
  const animData = props.name;

  ...
};