将 props 传递给动态创建的组件答案

【问题标题】：Passing props to a dynamically created component将 props 传递给动态创建的组件
【发布时间】：2017-12-10 02:23:01
【问题描述】：

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

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。从元素中移除这个道具。在 aa 中（由 _DashboardContainer 创建）在 div 中（由 _DashboardContainer 创建）在 div 中（由 _DashboardContainer 创建）在 _DashboardContainer 中（由 Connect(_DashboardContainer) 创建）在 Connect(_DashboardContainer) 中（由 _MainContainer 创建）

而且该组件从未出现...

有什么问题吗？

【问题讨论】：

标签： reactjs redux components

【解决方案1】：

来自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}/>
  )
}

看看有没有帮助。

【讨论】：

【解决方案2】：

嗯，试试这个：

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。

【讨论】：