如何将h1、h2等标签作为参数传入构建自定义大小的Header组件

你的原有写法不符合JSX语法规范，JSX不支持直接使用变量作为标签名拼接使用，你可以通过以下两种方式实现需求：

方式1：动态标签变量写法 #

将传入的标签名字符串赋值给大写开头的变量，JSX会自动识别为动态标签使用：

const Course =({course})=>{
  return(
    <div>
      <Header text="Web dev cirriculum" size="h1"/>
      <Header text={course.name} size="h2"/>
      <Content course ={course}/>
    </div>     
  )
}

const Header = ({text, size}) => {
  // 必须使用大写开头的变量存储标签名，JSX才会识别为动态标签
  const Tag = size;
  return <Tag>{text}</Tag>;
}

方式2：使用React.createElement API #

你也可以直接调用React内置的createElement方法实现，第一个参数直接传入标签名字符串即可：

import { createElement } from 'react';

const Header = ({text, size}) => {
  return createElement(size, null, text);
}

优化建议 #

你可以添加参数校验，限制size只能传入合法的标题标签，避免非法参数报错：

import PropTypes from 'prop-types';

Header.propTypes = {
  text: PropTypes.string.isRequired,
  // 仅允许传入h1到h6的合法标题标签
  size: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']).isRequired
};

// 可设置默认标签级别
Header.defaultProps = {
  size: 'h2'
};

内容的提问来源于stack exchange，提问作者codingKale