• 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>
        )
        
  • 相关阅读:
    多叉树
    PowerDesigner设置集锦(2)
    Delphi应用程序在命令行下带参数执行返回命令行提示的问题
    不允许在 '*******' 上使用扩展属性,或对象不存在
    仓库管理系统开发完成
    动态创建Frame窗体(根据类名,除T以外的字母)
    Access中的常用TSQL
    批量删除同类文件(带通配符)
    判断Access数据库中的表或查询是否存在的SQL
    序列化FastReport,重要提示少走弯路
  • 原文地址:https://www.cnblogs.com/ghh520/p/15085342.html
Copyright © 2020-2023  润新知