reactjs - 从 React 组件中的道具设置 HTML 元素？

Question

我需要根据 React 组件中的 props 设置 HTML 标题级别：

const Typography: React.FC<Props> = ({
  level
  children,
}) => {
  switch (semanticLevel) {
    case 1:
      return <h1>{children}</h1>;
    case 2:
      return <h2>{children}</h2>;
    case 3:
      return <h3>{children}</h3>;
  }
};

上面的代码有效，但感觉很乱。设置HTML时有没有办法level直接使用prop？所以像：

const Typography: React.FC<Props> = ({
  level
  children,
}) => {
   return <h`${level}`>{children}</`${level}`>;
};

标签： reactjs