共计 2086 个字符，预计需要花费 6 分钟才能阅读完成。
JSX 基本使用
JSX 是 JavaScript XML 的简写，表示在 JavaScript 代码中写 XML（HTML）格式的代码
声明式雨打更加直观、与HTML结构相同，降低了学习成本、提升开发效率
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| </div> | |
| </body> | |
| <script crossorigin src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script> | |
| <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> | |
| <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> | |
| <script type="text/babel"> | |
| const jsx = ( | |
| <h3>Hello, JSX</h3> | |
| ) | |
| const h1 = React.createElement('h1', { | |
| title: 'React', | |
| }, 'Hello, React JS') | |
| // ReactDOM.render(h1, document.querySelector('#app')) | |
| ReactDOM.render(jsx, document.querySelector('#app')) | |
| </script> | |
| </html> |
使用步骤
| // 1. 使用 JSX 语法创建 react 元素 | |
| const title = <h1>Hello JSX</h1> | |
| // 2. 使用 ReactDOMO.render() 方法渲染 react 元素到页面中 | |
| ReactDOM.render(title, document.querySelector('#root')) |
- React 元素的属性名使用驼峰命名法
- 特殊属性名：class -> className、for -> htmlFor、tabindex -> tebIndex
- 额米有子节点的 React 可以使用
/>结束 - 推荐使用小括号包裹 JSX，从而避免 JS 中的自动插入分号陷阱
| // 使用小括号包裹 JSX | |
| const title = ( | |
| <h1>Hello JSX</h1> | |
| ) |
JSX 中使用 JS 表达式
{ }
| let name = '张三' | |
| const box = ( | |
| <div>你好，我叫：{ name }</div> | |
| ) |
JSX 的条件渲染
可以使用 if/else 或 三元运算符 或 逻辑运算符 来实现
| const isLoading = true | |
| const loadData = () => { | |
| if(isLoading) { | |
| return <div>loading...</div> | |
| } | |
| return <div>数据加载完成，此处显示加载后的数据</div> | |
| // return isLoading ? (<div>loading...</div>) : (<div>数据加载完成，此处显示加载后的数据</div>) | |
| } | |
| const load = ( | |
| <div> | |
| { loadData() } | |
| </div> | |
| ) |
JSX 的列表渲染
如果要渲染一组数据，应该使用数组的 map() 方法
渲染列表时应该添加 key 属性，key 属性的值要保证唯一
map() 遍历谁，就给谁添加 key 属性
尽量避免使用索引号作为 key
| const users = [ | |
| { id: 1, name: '张三' }, | |
| { id: 2, name: '李四' }, | |
| { id: 3, name: '王五' } | |
| ] | |
| const list = ( | |
| <ul> | |
| { users.map(item => <li key={ item.id }>{ item.name }</li>) } | |
| </ul> | |
| ) |
JSX 的样式处理
行内样式—style
第一个花括号表示的是要插入一个 JS 内容，第二个花括号表示插入的是一个对象
| <h1 style={ { color: 'red', backgroundColor: 'skyblue' } }> | |
| JSX 行内样式 | |
| </h1> |
类名—className
| // 引入 css | |
| import './index.css' | |
| <h1 className="title"> | |
| JSX 类样式 | |
| </h1> |
JSX 语法规则总结
- 定义虚拟 DOM 时，不要写引号
- 标签中混入 JS 表达式时要用
{ } - 样式的类名指定不要用 class，要用
className - 内联样式，要用
style={ { key: value, key: value } }的形式去写 - 创建的虚拟 DOM 只能有一个根标签
- 标签必须闭合
- 标签首字母
- 若小写字母开头，则将该标签转为 html 中同名元素，若 html 中无该标签对应的同名元素，则报错
- 若大写字母开头，react 就去渲染对应的组件，若组件没有定义，则报错
正文完
