我可以通过HTML标签作为prop-React

Question

我想做这样的事情。

在父组件中

<child tag={h1}/>

在子组件中

<this.props.tag />

当我传递诸如（div，h1，ext。）之类的html组件（标签）之一时引发的问题“未解决的变量或类型div”

Answer 1

是的，可以。有两种方法可以满足您的需求。

方法1

<Child tag="h1" />

在“子级”组件中，您可以这样做。

const Child = ({ tag: Tag}) => (
 <Tag>Hello World</Tag>
)

方法2

<Child tags="<h1>Hello world</h1>" />

在“子组件”中，您可以这样做

const Child = props => <div dangerouslySetInnerHTML={{ __html: props.tags.outerHTML }}/>

这里是一个演示。 https://codesandbox.io/s/8x65l707yj

Answer 2

JSX表达式必须以大写字母开头，例如<Elment />

对于您的情况，当您要传递标签名称时，请使用createElement：

<div>
  {React.createElement(this.props.tag, {children: <content>, prop1: <v1>, ...})}
<div>

另一种替代方法是使用recompose#componentFromProp

Answer 3

您可以像这样从父组件传递 tag 作为子组件：
在父组件中：

<Child> <h1></h1> </Child>

在子组件中，您可以访问：

 render() {
    return (
       {this.props.children}
    )
}