用户登录

React 元素是构成 React 应用的最小单元, 就是要在屏幕上显示的东西。要在页面上显示 React 元素,首先得创建一个 root,然后用它的 render 方法显示 React 元素。

在这个 index文件里,先在文件顶部导入 React,它来自 react 这个包。然后再声明一个 element,它的值是 React 元素,可以用一下 React.createElement 这个方法创建这种元素。第一个参数是 type,这个 type 参数的值可以是 html 元素,也可以是自定义的组件。

先用一个 h1 元素,然后是一些属性,暂时没有可以设置成 null,后面是元素的后代,输入一行文字,宁皓网。下面可以在控制台上输出这个 React 元素观察一下。再把这个元素交给 root 的 render 方法显示。

在浏览器可以预览一下,你会发现页面上会显示一个大标题,标题内容是用 h1 元素包装的。React DOM 会根据要显示的 React 元素来更新文档的显示,它只会更新需要的地方。

在控制台再观察一下输出的 React 元素的样子,它是一个对象,里面的 type 属性的值是 h1,在 props 里面是一些属性,现在里面只有一个 children 属性,值是宁皓网。

这里我们再给这个 React 元素添加一个属性,提供一个对象,里面添加一个 className 属性,它的值就是元素上的 class 属性的值,设置成 title。注意这里用的这个属性的名字,跟 HTML 元素的属性的名字不太一样,React 元素会用 camelCase 的形式命名属性。

在浏览器上观察一下,现在控制台上输出的这个 React 元素的 props 属性里面,会多了一个 className 属性,它的值是 title。这个 React 元素对应的 HTML 现在会是一个 h1 标签,它上面会使用一个 class 属性,值是 title。

假设现在我们想在这个 h1 元素的周围添加一个 div 包装,包装上有个 app 类。修改一下 element ,先剪切一下 createElement ,再用一下 React.createElement 创建一个元素,类型是 div,添加一个属性,名字是 className,值是 app,它的 children 就是之前我们创建的那个标题元素。

在浏览器,观察一下 React 元素对应的 HTML,现在文档里会使用一个div 标签,上面有个 app 类,它包装的东西是一个 h1 标签,标签上有个 title 类,标题的内容是宁皓网。

回到项目,再改一下这个类的名字,把 app 换成 container,然后再观察一下页面元素,你会发现,现在包装 h1 元素的这个 div 元素上面用的类的名字,就会是 container。

React 元素:构成应用界面的最小单元《 React.js 前端应用开发:基本概念 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点