React-JSX

11次阅读
没有评论

共计 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'))
  1. React 元素的属性名使用驼峰命名法
  2. 特殊属性名:class -> className、for -> htmlFor、tabindex -> tebIndex
  3. 额米有子节点的 React 可以使用 /> 结束
  4. 推荐使用小括号包裹 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 语法规则总结

  1. 定义虚拟 DOM 时,不要写引号
  2. 标签中混入 JS 表达式时要用 { }
  3. 样式的类名指定不要用 class,要用 className
  4. 内联样式,要用 style={ { key: value, key: value } } 的形式去写
  5. 创建的虚拟 DOM 只能有一个根标签
  6. 标签必须闭合
  7. 标签首字母
    • 若小写字母开头,则将该标签转为 html 中同名元素,若 html 中无该标签对应的同名元素,则报错
    • 若大写字母开头,react 就去渲染对应的组件,若组件没有定义,则报错

正文完
 0
qiaofugui.cn
版权声明:本站原创文章,由 qiaofugui.cn 于2024-05-21发表,共计2086字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码