React：渲染不存在的HTML元素

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的实例：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

正如PeterMader所解释的那样，您正在使用该语法创建自定义html元素。我会稍微扩展一下这个答案。

首先，了解JSX只是一种语法糖并最终转化为JavaScript是很重要的。使用createElement创建React元素。

React.createElement(type, props, children);

这里需要注意的重要事项是type可以是以下之一：

• 对React组件的引用（例如示例中的Foo）。
• 一个字符串。

如果您正在编写React 而不使用JSX ，那么如果您将组件引用为foo或{{1}，则无关紧要因为您可以完全控制定义变量的方式。换句话说，这是纯JavaScript，JSX规则不适用。

但是，如果您使用React 与JSX ，则适用以下规则：

• Foo以大写字母= React Component。
开头
• type以小写字母= HTML元素开头。

事实上，官方文件说：

  

当元素类型以小写字母开头时，它引用内置组件，如type或<div>，并导致字符串<span>或'div'通过到'span'。以大写字母开头的类型如React.createElement编译为<Foo />，并对应于JavaScript文件中定义或导入的组件。

     

我们建议使用大写字母命名组件。如果你有一个以小写字母开头的组件，在将它用于JSX之前将其分配给大写变量。

那么React.createElement(Foo)呢？

如果React Element的<foo />没有解析为React Component并且不是标准HTML，React仍会将其视为HTML元素。

据我所知，React实际上没有任何白名单＆＃34;有效＆＃34; HTML标记，但以相同的方式处理以小写字母开头的任何内容。根据PeterMader的回复，您的浏览器中的结果可能会有所不同。

因此，这（JSX）：

type

在现代浏览器中，

会产生（HTML）：

<foo>hello world</foo>

这在技术上非常好，但可能仍然不是一个好主意。