增强在React中如何工作？

Question

我有以下内容

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

将呈现为

<div>abc</div>

我希望MyComp组件的元素类型是动态的，例如，如果该组件用作<MyComp as='a' />，则该组件应呈现为<a>abc</a>。我已经看到在Sementic UI中使用了这种方法，他们称之为模式元素增强。我对此进行了搜索，但找不到任何有用的东西。如何实现呢？

Answer 1

如果JSX中的标签名称以大写字母开头，则将其视为标识符。此标识符通常是用户定义的反应组件，但也可以是字符串，并将呈现“叶子”反应组件，即DOM节点。

因此要获得所需的行为：

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

Answer 2

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

您可以按照

的方式进行操作

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

您的道具在常量中获取值，然后可以将其呈现为反应成分

Answer 3

编辑：aseem-upadhyay是正确的，确切的术语是“动态组件”，这是定义此概念的更准确方法，尽管动态渲染的组件是由HOC渲染的

“呈现为”是简化过程以简化心理表征的过程。 实际上，您有一个更高阶的组件，将渲染另一个组件（“ as”组件），并传递额外的道具。

因此，它的返回值本质上将是“ as”元素。

例如，查看Button组件的源代码。

Answer 4

您可以使用道具as作为组件：

示例

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

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