React-JSX

10次阅读

共计 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 就去渲染对应的组件，若组件没有定义，则报错