React动态设置自定义标签

Question

我不想每个自定义标头类型创建一个组件，而是动态地这样做。

const HEADERS = {
   'header-one': 'h1',
   'header-two': 'h2',
   'header-three': 'h3',
   'header-four': 'h4',
   'header-five': 'h5',
};

_

let tag = HEADERS[type] || 'span';
return (
  <{tag} id={id}>
      {props.children}
  </{tag}>
);

Answer 1

看完之后好了：Dynamic tag name in jsx and React

我能够弄清楚它需要是一个资本（NFI为什么？）

const Tag = HEADERS[type] || 'span';
return (
    <Tag id={id}>
        {props.children}
    </Tag>
);

现在正在工作。仍然愿意接受更好的答案或解释，为什么它需要成为资本..