React中root.render如何处理内部内容？JSX、HTML及Fragment疑问

问题1：在root.render中直接写入类HTML代码（如用<>包裹的<h1>Hello</h1>），会被当作JSX还是HTML处理？ #

这是JSX，不是原生HTML。JSX是React提供的类HTML语法糖，本质是React.createElement()调用的简化写法。浏览器本身不认识JSX，需要通过Babel这类转译工具把它转换成标准JavaScript代码（对应React.createElement调用）后，才能被执行并最终渲染成DOM节点。

比如你写的<h1>Hello</h1>，转译后会变成：

React.createElement("h1", null, "Hello");

问题2：为何执行如下代码时，React.createElement语句被渲染为普通字符串而非对应的h1元素？ #

root.render(
    <>
        React.createElement("h1",{},"Hiii i am React Element !");
    </>
);

因为你把React.createElement语句直接写在了JSX的文本区域，JSX会默认把它当作普通字符串处理。在JSX中，若要插入JavaScript表达式（比如调用React.createElement生成元素），必须用**大括号{}**包裹表达式，这样React才会执行表达式并渲染它返回的React元素。

修正后的代码：

root.render(
    <>
        {React.createElement("h1",{},"Hiii i am React Element !")}
    </>
);

问题3：root.render是否仅支持渲染可转为HTML的ReactElement，能否支持原生HTML？同时确认Fragment<>是否可在root.render中正常使用？ #

1. root.render仅接受React元素（或null、undefined这类空值），不能直接渲染原生HTML字符串。如果一定要渲染原生HTML内容，需使用dangerouslySetInnerHTML属性（注意存在XSS风险，需谨慎使用），示例：

   root.render(
       <div dangerouslySetInnerHTML={{ __html: "<h1>原生HTML内容</h1>" }} />
   );
   

2. Fragment（<>是它的简写形式）完全可以在root.render中正常使用。它的作用是包裹多个React元素，避免生成额外的冗余DOM节点（不用Fragment的话，你可能需要额外嵌套一个<div>来包裹子元素），对渲染逻辑没有影响。比如：

   root.render(
       <>
           <h1>标题1</h1>
           <p>段落内容</p>
       </>
   );
   

   这段代码最终只会渲染<h1>和<p>两个DOM节点，不会生成额外的父节点。

内容的提问来源于stack exchange，提问作者xaviar