React学习3_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>
)

__EOF__

本文作者：羊37
本文链接：https://www.cnblogs.com/yang37/p/14914763.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！