React教程Frontend前端

React_语法规则

2019-03-29  本文已影响0人  _Miss_Chen

语法规则:

1、遇到HTML标签(以<开头),就用HTML规则去解析,遇到代码块({开头),就用JavaScript规则解析

2、class 编程 className

<div className="welcome">Hello, React</div>

3、如果不存在子节点,你可以使用自闭合格式的标签

<div className="welcome" />

4、绑定数据采用的是单{}

<div className="welcome">Hello, React { a + b }</div>

5、绑定style的时候要双{{ }},第一层代表表达式,第二层代表对象

<div style={{color: 'blue', fontSize:'100px'}}>Hello, React { a + b }</div>

6、注释

# 单行注释
{
         // <p>Hi</p>
}
# 多行注释
{
    /* 注释内容 */
}

7、自定义组件的时候,组件名称首字母大写

# Hello -> 首字母大写
function Hello() {
    return <div>Hello, React</div>
}

8、组件必须只能有一个根标签

import React, { Fragment } from 'react'
# Fragment 不会显示在DOM结构中
<Fragment>
        <li>111</li>
        <li>222</li>
        <li>333</li>
 </Fragment>

9、可以展开数组

let arr = [
    `<h1>aaa</h1>`,
    `<h2>bbb</h2>`,
]

function Hello() {
    return <div><ul>Hello, { arr }</ul></div>
}
# 结果
Hello, <h1>aaa</h1><h2>bbb</h2>

10、驼峰命名

上一篇 下一篇

猜你喜欢

热点阅读