JSX的基础知识
1.JSX基本使用
1.1什么是JSX
JSX 是 JavaScript XML 的简写，表示在 JS 代码中写 XML(HTML) 格式的代码
声明式语法更加直观，与 HTML 结构相同降低学习成本、提高开发效率
1.2使用步骤
-
使用 JSX 语法创建 react 元素
const title = <h1>Hello JSX</h1> -
使用 ReactDOM.render() 方法渲染 react 元素到页面中
ReactDOM.render(title,document.getElementById('root'))
2.JSX中使用JS表达式
嵌入 JS 表达式
数据是存储在 JS 中的，语法：{JS表达式}
const age = 19
const title = (<h1>Hello JSX,{ age}</h1>)
ReactDOM.render(title,document.getElementById('root'))
3.JSX的条件渲染
根据条件渲染待定的 JSX 结构
if/else ,三元表达式，逻辑与运算符
// 条件渲染
const isLoading = false
const loadDate = () => {
if (isLoading) {
return <div>loading...</div>
}
return <div>加载完成</div>
}
const title = (
<h1>条件渲染：{loadDate()}</h1>
)
4.JSX的列表渲染
使用数组的 map() 方法
渲染列表时应该添加 key 属性，并且 key 属性的值要保持唯一
map() 遍历谁给谁加 key，避免使用索引号作为 key
// 列表渲染
const songs = [
{ id: 1, name: '我' },
{ id:2, name: '和' },
{id:3,name:'你'}
]
const list = (
<ul>
{songs.map(item => <li key = {item.id}>{item.name}</li>)}
</ul>
)
5.JSX的样式处理
5.1行内样式——style
const list = (<h1 style={{color:'red'}}>JSX样式</h1>)
5.2类名——className（推荐）
index.js 文件中样式添加类名
//引入css
import "./index.css";
const list = <h1 className="title" style={{ color: "red" }}>JSX样式</h1>;
index.css 文件中添加样式
.title{
text-align: center;
}