JSX简介

1.JSX的基本使用

1.1 createElement()的问题

• 繁琐不简洁
• 不直观,无法一眼看出结构.
• 不优雅,用户体验不好.

1.2 JSX简介

JavaScript XML,在JavaScript中书写XML(HTML)格式的代码.

JSX是React的核心内容.

1.3 使用

1. 使用JSX语法创建react元素

const title = <h1>JSX JSX </h1>

2. 使用ReactDOM.render()方法渲染react元素到页面中

ReactDOM.render(title,root)

1.4 注意点

1. React元素的属性名使用驼峰命名法
2. 特殊属性名: class->className、for->htmlFor、tabindex->tabIndex
3. 没有子节点的React元素可以用/>结束
4. JSX元素建议使用()包裹

2.JSX中使用JavaScript表达式

语法

{JavaScript表达式}

3.JSX的条件渲染

const isLoading = true

/* 定义函数loadData() */ 
const loadData = () => {
    if(isLoading){
        return <div>数据加载中...</div>
    }
    return <div>数据加载完成</div>
}

/* 使用 */
const title = (
    <h1>
    条件渲染:
    {loadData()}
    </h1>
)

4.JSX的列表渲染

使用数组的map()方法

渲染列表时需要添加key属性: key属性要保证唯一,尽量避免使用索引作为key.

/* 定义list */
const oneList = [
    {id:1,name:"yang"},
    {id:1,name:"su"},
    {id:1,name:"li"},
    ]

/* 使用 */
const list = (
	<ul>
    {oneList.map(item =><li key={item.id}> {item.name} </li>)}
    </ul>
)

5.JSX的样式处理

5.1 行内样式style

const list =(
    <h1 style= {{ color:'red' }}>
    文字
	</h1>
)

5.2 类名className

const list =(
	<h1 className="xx">
    文字
	</h1>
)