排行榜 统计
  • 文章总数:1688 篇
  • 评论总数:5 条
  • 分类总数:8 个
  • 最后更新:11月20日

React 元素渲染

本文阅读 2 分钟
首页 常用工具 正文

元素是构成 React 应用的最小单位,它用于描述屏幕上输出的内容。

const element = <h1>Hello, world!</h1>;

与浏览器的 DOM 元素不同,React 当中的元素事实上是普通的对象,React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。

将元素渲染到 DOM 中
首先我们在一个 HTML 页面中添加一个 id="example" 的

:

<div id="example"></div>

在此 div 中的所有内容都将由 React DOM 来管理,所以我们将其称为 "根" DOM 节点。

我们用 React 开发应用时一般只会定义一个根节点。但如果你是在一个已有的项目当中引入 React 的话,你可能会需要在不同的部分单独定义 React 根节点。

要将React元素渲染到根DOM节点中,我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上:

const element = <h1>Hello, world!</h1>;

ReactDOM.render(

element,
document.getElementById('example')

);

本文来自投稿,不代表本站立场,如若转载,请注明出处:https://typecho.firshare.cn/archives/50.html
免责声明:文章内容不代表本站立场,本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺,仅供读者参考,文章版权归原作者所有。避免网络欺诈,本站不倡导任何交易行为。如您私自与本站转载自公开互联网中的资讯内容中提及到的个人或平台产生交易,则需自行承担后果。本站在注明来源的前提下推荐原文至此,仅作为优良公众、公开信息分享阅读,不进行商业发布、发表及从事营利性活动。如本文内容影响到您的合法权益(内容、图片等),请及时联系本站,我们会及时删除处理。
-- 展开阅读全文 --
react 程序常用命令
« 上一篇 08-18
Docuasurus-快速制作你的文档网站
下一篇 » 08-18