React - jsx使用及注意要点 react .js

React 使用 JSX 来替代常规的 JavaScript。

1、使用jsx的注意规则

• React元素的属性名使用驼峰命名法
• 特殊属性名：class -> calssName, for -> htmlFor, tabindex -> tabIndex
• 没有子节点的React元素可以使用 /> 结束。
• 推荐：使用小括号包裹JSX, 从而避免JS中的自动插入分号陷阱。

// 使用小括号包裹JSX
const div = (
    <div> Hello JSX</div>
)

2、使用JavaScript表达式

注意规则：

• 单大括号中可以使用任意的JavaScript表达式
• JSX自身也是JS表达式
• JS中的对象是一个例外，一般只会出现在style属性中
• 不能在{}中出现语句的，比如：if/for等

const hName = <h1> 我是JSX </h1>
const sayHi = () => 'Hi~,箭头函数'
const div = (
    <div>
        <div>嵌套表达式，{hName}</div>
        <p>{1}</p>
        <p>{1 + 2}</p>
        <p>{1 > 2 ? "大于":"小于或等于"}</p>
        <p>{sayHi()}</p>
    </div>
)

3、jsx可以条件渲染、列表渲染

• if/else，三元运算符，逻辑与运算符（&&）
• map()方法渲染一组数据

const citys = {
    {id: 1, name: 'beijing'},
    {id: 2, name: 'tianjin'},
    {id: 3, name: 'shanghai'}   
}
# 注意：渲染列表是应该添加key属性，key属性的值保证唯一
# 原则：map()遍历谁，就给谁添加key属性,尽量避免使用索引号作为key
const list = (
    <ul>
        {citys.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
)

4、jsx 的样式处理

4.1、行内样式 ---style

const list = (
    <h1 style={{ color: 'red', backgroundColor: 'skybule'}}>
        jsx的样式处理
    </h1>
)

ReactDOM.render(list, document.getElementById('root'))

4.2、类名 ---className（推荐）

    <h1 className="title">
        jsx的样式处理
    </h1>

5、jsx的转换过程

• JSX是createElment()方法的语法糖
• JSX语法会被@babel/preset-react插件编译为createElement()方法
• React元素是一个普通的JS对象，用来描述你希望看到的内容。

#前端##诗词歌赋##每日一诗#

——————————————————————————

海上生明月，天涯共此时。
情人怨遥夜，竟夕起相思。
灭烛怜光满，披衣觉露滋。
不堪盈手赠，还寝梦佳期。

- 望月怀远 【唐】张九龄