javascript - 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

阅读此内容后确定：jsx 和 React 中的动态标签名称

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

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

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