JSX

时间:2021-07-31
本文章向大家介绍JSX,主要包括JSX使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

JSX

Jsx 的基本使用

1、createElement()的问题

1、繁琐不简洁
2、不直观,无法一眼看出所描述的结构
3、不优雅,用户体验不爽
  • 示例说明:

    • createElement方法示例

      React.createElement(
          'div',
          {className: 'shopping-list'},
          React.createElement('h1', null, 'Shopping List'),
          React.createElement(
              'ul',
              null,
              React.createElement('li', null, 'Apple'),
              React.createElement('li', null, 'Banana'),
          )
      )
      
    • Jsx示例

      <div className="shopping-list">
          <h1>Shopping List</h1>
          <ul>
              <li>Apple</li>
              <li>Banana</li>
          </ul>    
      </div>
      

2、JSX 简介

JSX是JavaScript XML的简写,表示在JavaScript代码中写XML(HTML)格式的代码。

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

JSX是React的核心内容。

3、使用步骤

  • 1、使用JSX语法创建react元素

    const title = <h1>hello JSX</h1>
    
  • 2、使用ReactDOM.render()方法渲染react元素到页面中

    ReactDOM.render(title, document.getElementById('root'))
    

4、为什么脚手架中可以使用JSX语法?

1、JSX不是标准的ECMAScript语法,他是ECMAScript的语法扩展
2、需要使用bable编译处理后,才能在浏览器环境中使用
3、create-react-app脚手架中已经默认有该配置,无需手动配置
4、编译JSX语法的包为:@babel/preset-react

5、注意点

1、React元素的属性名使用驼峰命名法
2、特殊属性名:class --> className 、 for --> htmlFor 、 tabindex --> tabIndex
3、没有子节点的React元素可以用 “/>”  结束
4、推荐:使用 “小括号包裹JSX” ,从而避免JS中的自动插入分号陷阱

示例:
	const dv = (
		<div> hello JSX </div>	
	)

6、JSX中使用JavaScript表达式

  • 嵌入JS表达式

    • 数据存储在JS中

    • 语法:{JavaScript表达式}

    • 注意:语法中是单大括号,不是双大括号!

    • 示例:

      const name = 'xiaohao'const dv = (  <div>您好,我叫:{name}</div>)
      

7、JSX 的条件渲染

  • 场景:loading效果

  • 条件渲染:根据条件渲染特定的JSX结构

  • 可以使用if/else 、三元运算符、逻辑与运算符来实现

  • 示例:

    const isLoading = true
    
    // is/else
    // const loadData = () => {
    //     if (isLoading) return (<div>数据加载中......</div>)
    //     return (<div>数据加载完毕</div>)
    // }
    
    // 三元
    // const loadData = () => {
    //     return isLoading ? (<div>数据加载中......</div>) : (<div>数据加载完毕</div>)
    // }
    
    // 逻辑运算符
    const loadData = () => {
        return isLoading && (<div>数据加载中......</div>)
    }
    
    const dv = (
        <div>
            {loadData()}
        </div>
    )
    

8、JSX 的列表渲染

  • 如果要渲染一组数据,应该使用数组的map()方法

  • 注意:渲染列表时应该添加key属性,key属性的值要保证唯一

  • 原则:map()遍历谁,就给谁添加key属性

  • 注意:尽量避免使用索引号作为key

  • 示例:

    const songs = [
        {id: 0, name: '玫瑰花的葬礼'},
        {id: 1, name: '虫儿飞'},
        {id: 2, name: '逆战'}
    ]
    
    const list = (
        <ul>
            {songs.map(item => <li key={item.id}>{item.name}</li>)}
        </ul>
    )
    
    ReactDOM.render(list, document.getElementById('root'))
    

9、JSX 的样式处理

    1. 行内样式——style

      const songs = [
          {id: 0, name: '玫瑰花的葬礼'},
          {id: 1, name: '虫儿飞'},
          {id: 2, name: '逆战'}
      ]
      
      const list = (
          <ul style={{ color: 'red', backgroundColor: 'skyblue' }}>
              {songs.map(item => <li key={item.id}>{item.name}</li>)}
          </ul>
      )
      
    1. 类名——className(推荐)

      import './index.css'
      const songs = [
          {id: 0, name: '玫瑰花的葬礼'},
          {id: 1, name: '虫儿飞'},
          {id: 2, name: '逆战'}
      ]
      
      const list = (
          <ul className='list'>
              {songs.map(item => <li key={item.id}>{item.name}</li>)}
          </ul>
      )
      

原文地址:https://www.cnblogs.com/ghh520/p/15085342.html