如何传入 [<h1/><h2/>..] 等标签作为参数，以便能够构建具有自定义 header 大小的新组件？

Question

我希望能够将 header 标记作为参数传递，以构建可更改大小的自定义组件。这是有关我要实现的目标的更多上下文的代码

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}) => {
  return (
    {<{size}>{text}</{size}>}
  )
}

正如您在上面看到的那样，我试图在我的 <Header/> 组件上传递字符串“h1”和“h2”以构建自定义大小的 headers。

Answer 1

将header改为：

const Header = ({ text, size }) => {
  const Component = size;
  return (
    <Component>{text}</Component>
  )
}

之所以重命名，是因为 JSX 要求我们使用大写字母。如果把prop改为大写字母开头，就可以直接使用了：

const Header = ({ text, Size }) => {
  return (
    <Size>{text}</Size>
  )
}

如何传入 [<h1/><h2/>..] 等标签作为参数，以便能够构建具有自定义 header 大小的新组件？

How to pass in tags such as [<h1/><h2/>..] as parameters to be able to build a new component with custom header size?

jsx

reactjs