Question

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

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创建）

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

有什么不对吗？

Answer 1

嗯，试试这个：

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。

Answer 2

来自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 个答案:

警告：