3.1 Rendering an Element into the DOM 渲染一个元素到DOM里

Let's say there is a <div> somewhere in your HTML file:

假设你的HTML文件里面有一个 <div> :

<div id="root"></div>

We call this a "root" DOM node because everything inside it will be managed by React DOM.

我们称他为根DOM节点,因为它内部的每一个东西都将被React DOM管理。

Applications built with just React usually have a single root DOM node. If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like.

一般使用React创建的应用都有一个单独的根DOM节点。如果你想把React整合到你现有的应用当中去,你可以使用多个孤立的根DOM节点。

To render a React element into a root DOM node, pass both to ReactDOM.render():

渲染一个React元素到根DOM节点,传递给ReactDOM.render():

const element = <h1>Hello world!</h1>;
ReactDOM.render(
   element,
   document.getElementById('root')
);

Try it on CodePen.

尝试在CodePen写这段代码。

It displays "Hello World" on the page.

它将在页面上显示“Hello World”。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容