IT技术 - 动态创建的 React 组件即使使用大写也呈现为 HTML - 吾爱随笔录

我正在尝试呈现动态命名的 React 组件。我知道 JSX 要求变量名大写。但是，当我映射我的状态并尝试填充组件时，我收到以下错误：

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

我理解这一点，如果我不使用地图并直接在主类的渲染中输入，那么大写似乎可以在子 TextBlock 中使用。

主类：

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;
  }
}

子组件 TextBlock：

import React from 'react';

export default function TextBox(props) {

  const Tag = props.obj.tag;

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

  return Output;
}

检查 react chrome 工具，它似乎呈现为 html 元素。我如何做出react以识别这两个简介是 jsx 元素？