如何在 React 中引用标准 HTML 元素类型？ [复制]

Posted 2023-02-21

【中文标题】如何在 React 中引用标准 HTML 元素类型？ [复制]

【英文标题】：How to reference standard HTML element types within React? [duplicate]

【发布时间】：2021-07-14 16:26:41

【问题描述】：

在 React 中，我可以引用任何组件函数，这对于我想有条件地使用一种组件类型而不是另一种的情况非常有用。例如：

const Link = ( text, href, external = false ) => 
  const LinkType = external ? ExternalLink : InternalLink

  return <LinkType href=href>text</LinkType>

我想不通的是，当我的子组件是简单的 html 元素时，如何实现这种相同类型的界面？有这样的吗？

const SomeComponent = external ? React.Component('div') : React.Component('span')

【问题讨论】：

只要使用他们的名字作为字符串：const SomeComponent = external ? 'div' : 'span';

谢谢 Emile，我自己没能找到那个搜索。投票关闭为重复

它被埋在React.createElement documentation 中，这就是JSX 背后真正所谓的。 ;)

【参考方案1】：

就像这样：

const SomeComponent = external ? <div>Hey!</div> : <span>Hey!</span>;

【讨论】：

这与有条件地使用组件 reference 不同。换句话说，它消除了执行<SomeComponent /> 的能力，这就是OP 正在执行的操作。