javascript - react : Rendering non-existing HTML Element

Question

在阅读 React 文档时，我意识到在 JSX 中，以小写字母开头的元素被视为 HTML 元素。在将其付诸实践时，我注意到一些有趣的事情:当我传递一个不存在的小写元素时，React 会很好地呈现它。

function Foo() {
  return (<foo>hello world</foo>);
}

ReactDOM.render(
  <Foo />,
  document.getElementById('container')
);

呈现如下:

<div id="container">
    <foo data-reactroot="">hello world</foo>
</div>

在尝试找到这如何可能的答案时，我遇到了几个处理 React 中的 Web 组件/自定义元素的项目，这让我有点困惑。

这与自定义元素有关吗？这可以在任何受 React 支持的浏览器中运行吗？

Answer 1

不，这与自定义元素无关。

创建一个标签名称不代表任何预定义 HTML 元素的元素是完全没问题的。您将获得 HTMLUnknownElement 的一个实例:

const myElement = document.createElement('foo');
console.log(myElement.nodeName);
console.log(myElement instanceof HTMLUnknownElement);

未知元素没有特殊行为。如果你想创建一个 <foo>具有特殊行为的元素，您必须使用自定义元素。