Javascript 增强在React中是如何工作的？

我有以下组件

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

constmycop=（）=>abc；

将被渲染为

<div>abc</div>

abc

---

我希望

MyComp

组件的元素类型是动态的，例如，如果组件用作

，那么组件应该呈现为

abc

。我已经在Sementic UI中看到了这一点，他们称之为模式元素增强。我对此进行了搜索，但没有找到任何有用的东西。如何实现这一点？

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

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

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

---

例如，查看组件源代码。

您可以使用prop

作为组件：

示例

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

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

功能应用程序（道具）{
const As=props.As；
回归试验；
}
render（，document.getElementById（“根”））；
如果JSX中的标记名以大写字母开头，那么它将被视为标识符。该标识符通常是用户定义的react组件，但也可以是字符串，并将呈现“叶”react组件，即DOM节点

因此，要获得您想要的行为：

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

constmycomp=（{as:Component='div'}）=>abc；
您要查找的术语是渲染动态组件

你可以根据自己的想法去做

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

render（）{
const componentorender=this.props.as；
返回(
)
}

当你的道具在一个常量中得到值，这个常量可以被渲染为一个react组件
我想你应该把你想要渲染为道具的组件传递给它，然后把它放在它被传递到的组件的render方法中。我不确定你说的是不是真的，但我能想到什么of@brandNew我想知道他们是如何实现本页
增强
一节中所述的功能的：）您是想呈现div、div还是a？@G Cadogan很抱歉，问题中有一个输入错误。更正：）请您在回答中使用代码解释这一点好吗？我在回答中提到您，您的答案更准确地定义了设计模式。非常感谢Alexandre的手势！！很好的回答，事实上，以大写字母开头的和标记名的组合被视为标识符使这成为可能。
const MyComp = () => <div>abc</div>;