如何使用一些参数来获取React组件

时间:2017-05-25 02:33:37

标签: reactjs webpack

我想根据不同的param在一个Component中渲染不同的视图,这些视图来自一些模板。 Main.js

render() {
  const{ data, isEdit } = this.props
  console.log('Detail data:', data)
  console.log('isEdit:', isEdit)
  return <div>
  {getView(data)}
 </div>
}

getView

function getView(data) {
  let modelName = getModelName(data.PolciyName)
  modelName = 'M1'
  if (modelName) {
    let Model = require(`./models/${modelName}`)
    console.log('getView- modelName', modelName)
    console.log('typeof', typeof M1) //Object
    return <div><Model data={data} /></div>
    } else {
    return <div>no data</div>
  }
}

M1

function M1(data) {
  return <div>
    <h2>{data.name}</h2>
  </div>
}

并且此代码无法正常工作,会出错。 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of.

1 个答案:

答案 0 :(得分:0)

在渲染中调用{getView(data)}时,

尝试使用{this.getView(data)},与对函数M1的任何引用相同。如果内存对我有用,那是因为JavaScript与其他OO语言的工作方式略有不同,因为它实际上没有类,所以你必须在组件内本地明确说明范围。