Блог

Главная - Вопросы по программированию - Есть ли способ ссылаться на константу, используя строку в javascript / JSX (React framework)

Есть ли способ ссылаться на константу, используя строку в javascript / JSX (React framework)

#javascript #reactjs #constants #jsx

#javascript #reactjs #константы #jsx

Вопрос:

 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}`;

Я перепробовал все приведенные выше строки кода, ни одна из них не работает. Ясно, что мне нужно просмотреть строковые литералы и как они работают.
Есть ли обходной путь для моей проблемы? Если нет, я могу просмотреть и закодировать каждый из них по отдельности, я бы предпочел этого не делать.

Комментарии:

1. да: globalThis[this.props.name] , но это также довольно ужасный дизайн кода, и вы не должны доверять тому, что this.props.name содержит допустимую строку.

2. Я не понимаю, о чем вы спрашиваете. wallet например, это файл json, поэтому для простоты давайте назовем его объектом. Вы хотите передать объект компоненту и заставить его сделать с ним что-то конкретное на основе имени объекта? Или каково желание? Можете ли вы показать нам что-нибудь, что вы пробовали? Ваш приведенный выше пример слишком расплывчатый, чтобы я мог понять ваш вариант использования.

Ответ №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;

  ...
};