Reactjs 动态创建的React组件以HTML格式呈现，即使使用大写字母

我正在尝试动态渲染命名的React组件。我理解JSX要求变量名大写。但是，当我映射到我的状态并尝试填充组件时，会出现以下错误：

Warning: <TextBlock /> is using uppercase HTML. Always use lowercase HTML tags in React.

警告：正在使用大写HTML。在React中始终使用小写HTML标记。

我理解这一点，如果我不直接在主类的渲染中使用映射和键入，那么在子文本块中大写似乎是可行的

主要类别：

import React from 'react';
import TextBlock from './Components/TextBlock';

class RenderView extends React.Component {
  constructor() {
    super();

    this.state = {
      blurbs: [
        {
          value: "Text value",
          tag: "h2",
          component: 'TextBlock'
        },
        {
          value: "lorem stuff adnfsaldkfn asdfl lkjasdflkj asdlfk  alskdjflaksdjf ",
          tag: "p",
          component: 'TextBlock'
        }
      ]
    }
  }

  render() {

    const componentArray = this.state.blurbs.map((blurb, index) => {
      const Tag = blurb.component;
      return <Tag obj={blurb} key={index} />;
    })

    return componentArray;
  }
}

从“React”导入React；
从“./Components/TextBlock”导入TextBlock；
类RenderView扩展了React.Component{
构造函数（）{
超级（）；
此.state={
简介：[
{
值：“文本值”，
标签：“h2”，
组件：“文本块”
},
{
值：“lorem stuff adnfsaldkfn asdfl lkjasdflkj asdlfk alskdjflaksdjf”，
标签：“p”，
组件：“文本块”
}
]
}
}
render（）{
常量组件数组=this.state.blurbs.map（（blurb，index）=>{
const Tag=blurb.component；
返回；
})
返回组件数组；
}
}

子组件文本块：

import React from 'react';

export default function TextBox(props) {

  const Tag = props.obj.tag;

  const Output = <Tag>{props.obj.value}</Tag>

  return Output;
}

从“React”导入React；
导出默认功能文本框（道具）{
const Tag=props.obj.Tag；
常量输出={props.obj.value}
返回输出；
}

---

检查react chrome工具，它似乎是作为html元素呈现的。如何让react识别这两个Blurb是jsx元素？

我不确定您需要它有多大的动态性（如果它必须是一个字符串，或者它可以始终是react组件的引用），但是如果您直接使用组件引用而不是字符串，它应该可以工作：

this.state = {
  blurbs: [
    {
      value: "Text value",
      tag: "h2",
      component: TextBlock
    },

如果确实需要使用字符串，则可以将组件添加到贴图中，并以这种方式进行渲染：

const COMPONENTS = {
  TextBlock,
  // etc..
};

--

---

看起来直接引用很好。我认为地图解决方案在这里最有效，谢谢！你知道为什么不需要上面的代码吗？因为我只是一个字符串，react无法知道“TextBlock”是什么组件。无法注册组件，因此您需要通过引用准确地告诉它您的意思。

const Tag = COMPONENTS[blurb.component];