React之JSX的使用详解|青训营笔记

这是我参与「第四届青训营」笔记创作活动的第2天

JSX中使用JavaScript表达式

嵌入Js表达式

语法：{JavaScript表达式}

const name='Jack'
const title=(
  <h1 className='title'>
    <span>我的名字为：{name}</span>
  </h1>
)
复制代码

JSX的条件渲染

根据条件渲染特定的JSX结构

const isLoading=true
const loadData=()=>{
 if(isLoading){
   return <div>loading......</div>
 }
 return <div>数据加载完成，此处显示加载后的数据</div>
}
const title=(
  <div>
    条件渲染
    {loadData()}
  </div>
)
复制代码

或者直接使用js原生三元表达式

const loadData=()=>{
  return isLoading ? (<div>loading......</div>):(<div>数据加载完成，此处显示加载后的数据</div>)
}
复制代码

逻辑与运算符

例如：&&

```
const loadData=()=>{
  return isLoading&&(<div>loading......</div>)
}
```
复制代码

JSX的列表渲染

若要渲染一组数据，应该使用数组的map()方法

注：渲染列表时应该添加key属性，key的属性值要保证唯一， key值需要添加给遍历所产生的元素属性

特别的：需要尽量避免使用index(可变的数据)为key赋值例：

const songs=[
  {id:1,name:'a'},
  {id:2,name:'b'},
  {id:3,name:'c'}
]
const list=(
  <ul>
    {songs.map(item=><li  key={item.id}>{item.name}</li>)}
  </ul>
)
const root=ReactDOM.createRoot(document.getElementById('root'))
root.render(list)
复制代码

想法：这块感觉真的很灵活，有种将js和html结合起来的感觉，在渲染页面时也会方便很多

JSX样式处理

行内样式-----style

注:style属性为一个对象(由于style样式可能具有多个，需要将所有样式以'属性：值'的方式全部写入htnl标签的style属性中)

例：
```
const list=(
  <h1 style={ {color:'red',backgroundColor:'skyblue' } }>JSX的样式处理</h1>
)
复制代码
```

写法有些复杂与熟悉的css写法不太相似，还是不建议使用行内样式

类名------className(更推荐使用)
```
const list=(
    <h1 className='title'>JSX的样式处理</h1>
  )
.title{
  text-align: center;
}
复制代码
```
//可以将样式放入独立的文件中并引入到index.js中

//在需要的文件内引入样式文件中使用代码可维护性更好

JSX中特殊属性名

class->className for->htmlForm tabindex->tabIndex (驼峰命名法)

```
const title=<h1 className='title'>Hello JSX <span >这是一个span标签</span></h1>
```
复制代码

学习参考：哔哩哔哩 React教程