增强是如何起作用的?

如果JSX中的标记名以大写字母开头,那么它将被视为标识符。此标识符通常是用户定义的react组件,但也可以是字符串,并将呈现“leaf”react组件,即dom节点。

所以要得到你想要的行为:

const MyComp = ({ as: Component = 'div' }) => <Component>abc</Component>;

你要找的术语是 渲染动态组件

你可以做一些事情

    render() {
    const ComponentToRender = this.props.as;
    return (
        <a><ComponentToRender /></a>
    )
}

当你的道具在一个常量中得到值,这个常量可以被渲染为一个反应组件。

编辑:aseem upadhyay是正确的,确切的术语是“动态组件”,这是定义这个概念的更准确的方法,尽管动态渲染的组件是由hocs渲染的

“渲染为”是一个过于简单化的过程,有助于心理表征。 实际上,您有一个更高阶的组件,它将呈现另一个组件(“as”组件),并将额外的道具传递给它。

所以,它的返回值本质上就是“as”元素。

看看 Button 例如,组件源代码。

你可以用道具 as 作为您的组件:

例子

function App(props) {
  const As = props.as;
  return <As> Test </As>;
}

ReactDOM.render(<App as="div" />, document.getElementById("root"));