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数据。

根据变量值更改属性值

1 个答案: