react学习-JSX(二)

一、JSX是什么?

概念:JSX是 javascript XML(HTML)的缩写,表示在 JS 代码中书写 HTML 的结构

作用:在 React 中创建 HTML 结构

二、JSX表达式

语法:{ js 表达式 }

与 Vue 的插值表达式非常相似

可以使用的表达式

  1. 字符串、数值、布尔值、null、undefined、object( [] / {} )
  2. 1 + 2、'abc'.split('')、['a', 'b'].join('-')
  3. function
  4. 使用常规的变量
const name = 'xxhzm'
<h1>{ name }</h1>
  1. 使用 function
const getAge = () => {
  return 16
}
  1. 使用一个三元运算符
const flag = true
{ flag ? '真棒' : '真菜'  }

注:if 语句/ switch-case 语句/ 变量声明语句,这些叫做语句,不是表达式,不能出现在 {} 中!!

三、JSX列表渲染

在 vue 中使用 v-for 这个指令来进行渲染,但是 react 中没有指令。那react 如何实现呢?

在 react 中使用列表渲染需要使用原生的 map 方法

const list = [
  { id: 1, name: '奔驰' },
  { id: 1, name: '宝马' },
  { id: 1, name: '奥迪' },
]

{ list.map(item => <li>{ item.name }</li>) }

我们需要渲染哪一个内容就 return 谁

在 vue 中使用 v-for 渲染的时候需要添加一个 key,那 react 呢?

我们可以直接在遍历的标签上添加一个 key 属性,提供 diff 性能

{ list.map(item => <li key={ item.id } >{ item.name }</li>) }

注:我们在标签上添加的 key 属性仅仅在 react 内部中使用,不会出现在真实的 DOM 结构中

四、JSX条件渲染

在 vue 中我们可以使用 v-if v-else v-show,上面已经说过了 react 中没有指令,那么如何进行实现呢?

  1. 使用三元表达式 - 满足条件渲染 span 标签

    const flag = true
    { flag ? <span>hello world</span> : null }

    如何模板结构很复杂呢?

    我们可以使用()来将模板内容包裹起来,在()中换行什么的都没有问题

    { flag ? (
    <div>
        <span>hello world</span>
    </div>
    : null }
  2. 使用 逻辑与(&&) 逻辑或(||) 运算符

    const flag = false
    
    { flag && <span>hello world</span> }
    { flag || <span>Hi</span> }

五、JSX样式处理

  1. 行内样式

    在写行内样式时我们直接在标签上添加一个 style 属性即可

    <span style={{ color: 'red', fontSize: '30px' }}>hello world</span>

    也可以写成

    const style = {
      color: 'red', 
      fontSize: '30px'
    }
    
    <span style={ style }>hello world</span>
  2. 类名样式

    在元素上直接绑定一个 className 属性即可

    app.css:
    .active {
      color: skyblue;
      font-size: 30px
    }
    
    app.js:
    import './app.css'
    <span className='active'></span>
    
  3. 动态类名样式

    const activeFlag = false
    
    <span className={ activeFlag ? 'active' : '' }>hello world</span>

六、JSX注意事项

  1. JSX必须有一个根节点,如果没有根节点,可以使用<></>(幽灵节点)替代
  2. 所有标签必须形成闭合,成对闭合或者自闭合都可以
  3. JSX中的语法更加贴近JS语法,属性名采用驼峰命名法 class -> className for -> htmlFor
  4. JSX支持多行(换行),如果需要换行,需使用() 包裹,防止bug出现
最后修改:2022 年 06 月 18 日
如果觉得我的文章对你有用,请随意赞赏