JSX
一、基本使用
1、createElement 方法过于繁琐,例如:
React.createElement("div", {id: "d1", className: "item"},
React.createElement("ul", null,
React.createElement("li", null, "ok"),
React.createElement("li", null, "yes"),
React.createElement("li", null, "no")))
缺点:繁琐、不直观、不优雅、体验感差
2、 JSX:
<div id="d1" class="item">
<ul>
<li>ok</li>
<li>yes</li>
<li>no</li>
</ul>
</div>
(1)JSX: javaScript xml
(2)JSX是 React 的核心内容
(3)使用JSX创建 React 元素:
const title = <h1>123</h1>
(4)原理:babel进行编译,转成js对象,用 ReactDOM.render() 方法将这个对象转成DOM元 素,最后插入页面
3、注意
(1)JSX不是ES的标准语法,它是ES的扩展
(2)需要使用babel编译处理后才能在浏览器环境中使用
(3)编译JSX的包:@babel/preset-react
(4)React 元素的属性名使用驼峰命名法
(5)如果元素没有子节点,可直接使用单标签,但是以 /> 结尾
(6)可以使用()包裹JSX,以避免一些问题
二、JSX 中使用js表达式
语法:{JS表达式}
例如:
let ok = 123;
const text = (
<p>{ok}</p>
)
三、条件渲染
可以使用 if 三元运算符、逻辑运算符,例如:
let is = true;
const ok = () => {
if(is) return (
<div>我是叮叮当</div>
)
return (
<div>叮叮当在哪里</div>
)
}
四、列表渲染
使用数组的 map 方法, 例如:
const books = [
{ id: 1, name: '西游记', author: '吴承恩' },
{ id: 2, name: '水浒传', author: '施耐庵' },
{ id: 3, name: '红楼梦', author: '曹雪芹' },
{ id: 4, name: '三国演义', author: '罗贯中' },
]
const list = (
<ul>
books.map(item =>
<li key={item.id}>
书名:{item.name},作者:{item.author}
</li>)
</ul>
)
五、样式处理
1、行内样式 style
const title = <h1 style={{ width: '20px', height: '20px'}}>你好</h1>
注意:这不是俩组花括号,外边代表的是js,里边代表的是对象
2、类名 className (推荐)
需得使用import导入样式表
React 完全利用JS语言自身的能力来编写UI,而不是增强HTML功能。