React之创建元素

React之创建元素

React创建元素是围绕React.createElement(type,props,content)方法实现的。另,ReactDOM只是使用React库的一种方式, 告诉React,需要React渲染什么,而不是实际页面上要渲染什么。(记录:在浏览器中实现效果,需要使用的是react-dom)

其中,

1.type:

是创建的元素类型,如'div','span','p'等等。

2.props:

是创建的元素包含的属性所组成的对象,形如:

{ className:'div-class' },或null

3.content:

是要创建的元素里面含有的内容,可以是普通文本,也可以是使用React创建的元素,或者是javascript代码,形如:

'I am text.'或

React.createElement('span',null,'I am text.');

创建React元素,最终是为了渲染到页面上,将内容渲染到页面上。React创建的元素通过ReactDOM提供的render()方法渲染到页面上。

先在DOM节点上放置一个DOM节点,如:

React创建一个class为react-dom的元素,然后在DOM上找到id为dom_root的DOM节点,将创建的元素放置在id为dom_root的节点里面,翻译成React语法,如下所示:

const reactElement = React.createElement('span',,'I am text.');

ReactDOM.render(reactElement,document.getElementById('dom_root'));

此时页面上已经可以看到效果了。

小点:

1.在控制台打印出reactElement,reactElement是一个含有'key','props','type'和其它私有属性的js对象。

下一篇总结:JSX

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180213G0CMY500?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券