Question

我有一个名为“Button”的工作组件，此组件使用它：

import React, { Component } from 'react'

import Button from './Boxes/Button'

class AutoGraph extends Component {

  constructor(props) {
    super(props)

    this.placed = {
      components: [
        {
          type: 'Button',
          x: 10,
          y: 10
        }
      ]
    }

  }

  render() {
    return (
        <svg width={this.windowWidth} height={this.windowHeight}>

        <g id="component-layer">{this.placed.components.map((item, i) => {
          return React.createElement(item.type, {
            key: i,
            x: item.x,
            y: item.y
          })
        })}
          <Button x="150" y="20"/>
        </g>

      </svg>
    )
  }
}

export default AutoGraph

动态创建的按钮只是呈现为＆lt; Button x =“10”y =“10”/＆gt;但硬编码的Button组件在它正确呈现后直接显示。如何使用我的Button组件代码获取动态创建的Button？

Answer 1

字符串用于内置类型（div，a等）。函数和类表示自定义组件。如果要渲染自定义组件，则必须传递该类/函数：

更改

 type: 'Button',

到

 type: Button,

Answer 2

您必须引用组件本身，而不是名称为

的字符串

{
   type: Button, // not a string
   x: 10,
   y: 10
}

具有动态标记名称的React组件未呈现

2 个答案: