有没有办法在 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 组件，我想传入一个像 'wallet' 这样的道具并引用导入的常量。

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

我已经尝试了以上所有代码行，其中 none 行。很明显，我需要复习字符串文字及其工作原理。我的问题有解决方法吗？如果没有，我可以仔细检查并单独编码，我不想这样做。

Answer 1

我认为你想做的是这个？使用功能组件而不是 class 编写，因此在引用 props 时不需要 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;

  ...
};

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

Is there a way to reference a constant using a string in javascript/JSX (React framework)

javascript

constants

jsx

reactjs