将道具传递给动态创建的组件

时间:2017-07-06 07:47:16

标签: reactjs redux components

我动态创建一个组件,并喜欢将一些道具传递给它,如下所示

import ResouceUsageGadget from './ResouceUsage/ResouceUsageGadget'
  constructor() {
    ...
    this.gadgetStateMap = {
            "ResouceUsageGadget":{"name":"ResouceUsageGadget", "type":ResouceUsageGadget, "state":"normal"}
    }
  }
...
render(){
  let aa = this.gadgetStateMap["ResouceUsageGadget"].type
  return (
     <aa gadgets={this.props.gadgets}/>
  )
}

const DashboardContainer = connect(
          store => {
                return {
                    gadgets: store.DashboardReducer.gadgets
                };
              }
            )(_DashboardContainer);
export default DashboardContainer

我收到了警告:

警告:标记上的未知道具gadgets。从元素中删除此prop。     在aa中(由_DashboardContainer创建)     在div中(由_DashboardContainer创建)     在div中(由_DashboardContainer创建)     在_DashboardContainer中(由Connect(_DashboardContainer)创建)     在Connect(_DashboardContainer)中(由_MainContainer创建)

组件从未出现......

有什么不对吗?

2 个答案:

答案 0 :(得分:0)

嗯,试试这个:

import ResouceUsageGadget from './ResouceUsage/ResouceUsageGadget'
  constructor() {
    ...
    this.gadgetStateMap = {
            "ResouceUsageGadget":{"name":"ResouceUsageGadget", "type":ResouceUsageGadget, "state":"normal"}
    }
  }
...
render(){
  let aa = React.createElement(this.gadgetStateMap["ResouceUsageGadget"].type, 
                               {'gadgets': this.props.gadgets})
  return (
     {aa}
  )
}

const DashboardContainer = connect(
          store => {
                return {
                    gadgets: store.DashboardReducer.gadgets
                };
              }
            )(_DashboardContainer);
export default DashboardContainer

<aa/>组件实际上是一个html标记,就像<input/>一样,而不是您导入的组件ResouceUsageGadget

答案 1 :(得分:0)

来自React docs

  

警告:

     

始终使用大写字母启动组件名称   例如,<div />表示DOM标记,但<Welcome />表示一个组件,并且需要Welcome在范围内。

尝试更改

render(){
  let aa = this.gadgetStateMap["ResouceUsageGadget"].type
  return (
     <aa gadgets={this.props.gadgets}/>
  )
}

render(){
  let Aa = this.gadgetStateMap["ResouceUsageGadget"].type
  return (
     <Aa gadgets={this.props.gadgets}/>
  )
}

看看是否有帮助。