当前位置 博文首页 > CSDN凉宸：只需5分钟教会你使用React中的JSX

最大化 缩小

    CSDN凉宸：只需5分钟教会你使用React中的JSX

    作者：[db:作者] 时间：2021-07-25 12:13

    JSX的基本使用

    createElement()的问题

    在这里插入图片描述

    • 编写繁琐不简洁
    • 非常的不直观，无法直接看出结构
    • 不优雅，用户体验不好
    • JSX写法
      在这里插入图片描述

    JSX简介

    JSX是Javascript的一种语法拓展
    JSX是JavaScript XML简写，表示在JavaScript中编写XML格式代码（也就是HTML格式）

    优势：

    • 声明式语法更加直观
    • 与HTML结构相同
    • 降低了学习成本、提升开发效率

    JSX是react的核心

    使用

    • 使用JSX语法创建react元素
    const title = <h1 >HELLO</h1>
    • 使用ReactDOM.render()方法渲染react到页面中
    ReactDOM.render(
  title,
  document.getElementById('root')
);

    在这里插入图片描述
    在这里插入图片描述

    注意点

    • React元素的属性名使用驼峰命名法
    • 特殊属性名：class -> className、for -> htmlFor、tabindex-> tablndex

    class属性：
    在这里插入图片描述

    • 没有子节点的React元素可以使用<span/>结束
      在这里插入图片描述
    • 使用小括号包裹JSX，从而避免JS中的自动插入分号陷阱（推荐）
      在这里插入图片描述

    JSX中使用JavaScript表达式

    嵌入JS表达式

    • 数据储存在JS中
    • 语法：{JavaScript表达式}
    • 注意：语法中是单花括号，不是双花括号
    const name = '张三'

const title = (
  <h1 className="title">
    HELLO {name}
  </h1>
)

    在这里插入图片描述

    注意

    • 单花括号中可以使用任意的JavaScript表达式
    const title = (
  <h1 className="title">
    <p>{1}</p>
    <p>{1 + 1}</p>
    <p>{'HELLO'}</p>
    <p>{10 < 5 ? '是的' : '不是'}</p>
  </h1>
)

    在这里插入图片描述

    • JSX自身也是JS表达式
    const p = (
  <p>
    HELLO
  </p>
)
const title = (
  <h1 className="title">
    {p}
  </h1>
)

    在这里插入图片描述

    • JS中的对象是一个例外，一般只会出现在style属性中
    • 不能在{}中出现语句（例如：if/for等等）

    JSX条件渲染

    • 场景：文字的显示不同
    • 根据条件渲染特定的JSX结构
    const isShow = false
const show = () => {
  if (isShow) {
    return <div>我是true</div>
  }
  return (<div> 我是false</div>)
}
const title = (
  <h1 className="title">
    {show()}
  </h1>
)

    在这里插入图片描述
    在这里插入图片描述
    -可以使用id/else或三元运算符或逻辑与运算符实现

    三元：

    const isShow = true
const show = () => {
  return isShow ? (<div>我是true</div>) : (<div>我是false</div>)
}
const title = (
  <h1 className="title">
    {show()}
  </h1>
)

    在这里插入图片描述
    逻辑与：

    const isShow = true
const show = () => {
  return isShow && (<div>显示</div>)
}
const title = (
  <h1 className="title">
    {show()}
  </h1>
)

    在这里插入图片描述
    在这里插入图片描述

    JSX的列表渲染

    • 渲染一组数据，使用数组的map()方法
    const names = [
  { id: 1, name: '张三' },
  { id: 2, name: '李四' },
  { id: 3, name: '王五' },
  { id: 4, name: '赵四' },
  { id: 5, name: '刘能' }
]
const title = (
  <ul className="title">
    {names.map(item => <li>{item.name}</li>)}
  </ul>
)

    在这里插入图片描述
    但是会有报错
    在这里插入图片描述
    意思就是没有key值 我们设置一下即可

    const names = [
  { id: 1, name: '张三' },
  { id: 2, name: '李四' },
  { id: 3, name: '王五' },
  { id: 4, name: '赵四' },
  { id: 5, name: '刘能' }
]
const title = (
  <ul className="title">
    {names.map(item => <li key={item.id}>{item.name}</li>)}
  </ul>
)

    在这里插入图片描述
    此时就不报错了

    • 渲染列表时应该添加key属性，属性值要保证唯一
    • map()遍历谁，就给谁+key属性
    • 尽量避免使用索引号作为key值

    JSX样式处理

    • 行内样式 ----style
    const title = <h1 style={{ color: 'red', backgroundColor: '#000' }}>HELLO</h1>

    在这里插入图片描述

    • 类名 — className（强烈推荐）

    在这里插入图片描述

    cs
    上一篇：CSDN凉宸：一文秒懂React组件
    下一篇：没有了