Изменить значение проп в зависимости от значения переменной

Question

У меня есть объекты json, хранящиеся в отдельных файлах.Я хочу передать один из объектов json в качестве реквизита в компонент дисплея, выбрав json для передачи на основе значения параметра запроса.

import React from 'react'
import _ from 'lodash'
import PageMain from '../Page'
import test1 from '../jsonData/test1'
import test2 from '../jsonData/test2'
import queryString from 'query-string'

class Page extends React.Component {
  componentWillMount() {
    const location = queryString.parse(location.search)
    // Assume BrandName = 'test1'
    let BrandName = _.get(location,'brand', '')
  }
  render(){
    return(
      <>
        <PageMain brand={BrandName}/>
      </>
    )
  }
}

export default Page

Я хочу передать в test1(ссылается на импортированный файл test1), но я передаю 'test1' строку.

Я не могу просто использовать троичный оператор или аналогичный, потому что у меня будет намного больше jsonData.

Answer 1

Что вам нужно, так это преобразовать строку в имя модуля в js.

если бы он был переменным, вы могли бы использовать: window["variableName"] или eval("variableName")

Но в вашем примере это модули. сначала вы должны назначить модули для переменных или массивов.

import test1 from '../jsonData/test1' import test2 from '../jsonData/test2'; const tests = {'test1':test1, 'test2':test2};

Тогда используйте: <PageMain brand={tests[BrandName]}/>

---

Но я не рекомендую это. Вы можете просто поместить свои имена в массив ['test1','test2'] и получать данные JSON другим способом, а не с помощью импорта.