javascript - 根据变量的值更改 prop 值

Question

我将 json 对象存储在单独的文件中。我想将其中一个 json 对象作为 prop 传递到显示组件中，并根据查询参数的值选择要传入的 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 数据，而不是使用 import。