Reactjs逐渐加深理解

Posted 2020-06-28 前端备忘录

 

Reactjs

 

React.render(参数1，参数2)使用：

作用：将标签内容插入到页面中目标Dom节点中

说明：

参数1：html存在的标签对（可以含内容），比如<span>这是标签内容</span>，也可以是已经通过React.createClass创建好的组件（其实可以理解为标签），如果创建的组件名为Zujian1,那么这里的参数1就需要写成标签的形式，<Zujian1></Zujian1> （注意组件名首字母都必须是大写，下面会将怎么创建）

参数2：页面Dom目标，即这个第一个参数所指的这个标签及内容将会插入到页面的这个位置，比如插入到页面中id为example1的dom节点 :document.getElementById(‘example1‘)

举例使用：

将<span>这是标签内容</span> 插入到页面中ID为example1 的节点：

React.render(<span>这是标签内容</span>, document.getElementById(‘example1‘));

 

 

创建组件：

使用React.createClass()方法;

用法说明：

var 组件名 = React.createClass({

　　render: function(){

　　　　return <p>组件1内容</p>

　　}

})

 特别注意组件名首字母必须大写，比如组件名为:zujian1 则不会起任何作用，需要写成 Zujian1

具体用法：

<div id="example1"></div>
<div id="example2"></div>
<script type="text/jsx">

    var Zujian1 = React.createClass({
        render: function(){
            return <p>内容1</p>
        }
    });

    React.render(<Zujian1></Zujian1>, document.getElementById(‘example1‘));

    var Zujian2 = React.createClass({
        render: function(){
            return <p>内容2</p>
        }
    });

    React.render(<Zujian2></Zujian2>, document.getElementById(‘example2‘));

</script>

页面中将输出结果（当然这两个内容都分别在id=‘example1‘及id=‘example2‘的div里）：

内容1

内容2