React初探 – JSX与渲染DOM

Daming 2020-02-18
0条评论 248 次浏览
Daming 2020-02-180条评论 248 次浏览

JSX是为React.createElement(component, props, …children)方法提供的语法糖.

元素是构成React应用的最小单位,JSX 就是用来声明 React 当中的元素。

下方不是字符串也不是 html,就是 js 语句(jsx语法),一些js中的标识符像 class 和 for 就不好作为标签的属性名,React DOM 使用 className 和 htmlFor 来代替对应的属性。

const ele = <p className='teststyle'>Hello, world!</p>;

这里声明了ele元素,在React中这个元素是一个对象 ,
它有
1.标签名属性,值为:p
2.元素属性,因为元素可能有多个属性,这里以对象表示:{ className: 'teststyle' }
3.内容属性,值为:Hello, world!

相当于 :

React.createElement("p",{className: 'teststyle'},"Hello, world!");

将虚拟dom渲染为dom

使用ReactDOM的render方法,第一个参数是 使用jsx声明的 react 元素实例,可以嵌套,相当于是html模板,第二个参数是插入该模板的目标位置。

html:

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

javascript:

let test = <div><h1>标题</h1><p>内容</p></div>;

    ReactDOM.render(
        test,
        document.getElementById('example')
    );

这样就可以将jsx声明的元素在真实的dom元素(id为example的div元素)内渲染出来了

插值表达式

和vue 、angular 不同的是 react 的插值表达式是单括号的:{}

const ele = <h1>{i == 1 ? 'i是1' : 'i不是是1'}</h1>

数组

数组会自动展开:

    var arr = [
        <li>这是数组中的第0项</li>,
        <li>这是数组中的第1项</li>,
    ];


    ReactDOM.render(
        <div>{arr}</div>,
        document.getElementById('test')
    );

效果:

<div id="test">
    <div><li>这是数组中的第0项</li><li>这是数组中的第1项</li></div>
</div>

样式

使用驼峰命名法定义样式

var myStyle = {
    fontSize: 100,
    color: 'red'
};
ReactDOM.render(
    <h1 style = {myStyle}>标题</h1>,
    document.getElementById('example')
);
1+

发表评论

电子邮件地址不会被公开。