增强是如何反应的？

Question

我有以下组件

const MyComp = () => <div>abc</div>;

将被呈现为

<div>abc</div>

我希望MyComp组件的元素类型是动态的，如果将该组件用作<MyComp as='a' />，则应该将该组件呈现为<a>abc</a>。我见过这在Sementic中被使用，他们称之为模式元素增强。我对此进行了搜索，但找不到任何有用的东西。如何做到这一点？

Answer 1

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

为了得到你想要的行为：

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

Answer 2

您要寻找的术语是呈现动态组件。

你可以做点什么

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

当你的道具在一个常量中得到值时，这个常数就可以作为一个反应组件呈现出来。

Answer 3

编辑: accurate是正确的，确切的术语是“动态组件”，这是定义这个概念的一种更精确的方法，尽管动态呈现的组件是由HOCs呈现的。

“呈现为”是一种过度简化的过程，以帮助心理表征。实际上，您有一个高阶组件，它将呈现另一个组件( "as“)，并将额外的道具传递给它。

因此，它的返回值实质上是"as“元素。

例如，请看一下按钮组件源代码。