react笔记_04jsx语法学习

乖女子@@@

已于 2023-06-12 13:57:40 修改

阅读量569

点赞数

分类专栏： React 文章标签： react.js 学习 javascript

于 2022-11-21 14:11:57 首次发布

本文链接：https://blog.csdn.net/qq_43260366/article/details/127963472

版权

React 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

1.jsx是js的扩展语法 ,全称为 javascript XML
2.jsx语法与js语法的不同之处
- [1] jsx能够识别虚拟dom, 可以直接创建vdom；
  - 注意：创建虚拟dom时，跟标签有且仅有一个；若是我们不需添加根标签造成dom元素冗余，可以使用空标签或Fragment组件
- [2] 若是想要在jsx语法中混入 js 表达式时，需要使用{}包裹；
  - 注意： jsx中仅能混入 js表达式，不能混入js语句
    
    tips: 若是需要使用循环语句可以使用map，若是使用条件控制语句可以使用&&
    - 举例说明：-> 示例1
    - 举例说明：-> 示例2
  - 在渲染过程中 null 、boolean、undefined 虽然都是有效的子代，但它们不会直接被渲染。因此有些组件是在符合条件的情况下才渲染 -> 可以结合&& 操作符使用(因为jsx中不能混入if 语句)
    - 举例说明：-> 示例3
    - 举例说明：-> 示例4
- [3]在标签间添加类名时–>样式的类名需要使用className
  - 注意：使用class样式虽然能够正常显示但是会在控制台报错
  - 原因：class为es6定义类的关键字，jsx为避开使用关键字作为属性因此在其中类名使用className
- [4]内连样式不能使用字符串而是要使用对象
- [5]标签必须闭合
3.渲染过程：在我们使用jsx在创建虚拟dom
- 若是标签名小写： react会将标签渲染为html的同名元素；但是若是html中没有同名标签，虽然能够正常渲染但是会在控制台报错；eg: 则会报错
- 若是标签名为大写：react就去寻找对应的组件并进行渲染，若组件没有定义，则报错；

示例1

<script type="text/babel">
  class Mycomponent extends React.Component{
    render(){
      // 报错：Warning: Expected `onClick` listener to be a function, instead got a value of `string` type
      // 原因：在jsx中混入js语法时需要使用{}包裹
      return <h1 onClick='test'>测试事件绑定</h1>
    }
    test(){
      console.log(this)
    }
  }
  ReactDOM.render(<Mycomponent />, document.getElementById('test111'))
</script>

修改后

return <h1 onClick={this.test}>点击</h1>

示例2

需求：将后端返回的数组[‘Angular’, ‘React’, ‘Vue’]渲染在页面上，每个数组元素以li元素进行渲染
实现
不能直接使用for循环-- 原因：jsx中只能混入js表达式

<div id="test"></div>
<!--  需求： 将后端返回的数组['Angular', 'React', 'Vue']渲染在页面上，每个数组元素以li元素进行渲染-->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
    const arr =['Angular', 'React', 'Vue'] 
    const vdom=(
        // 类名使用className
        <div className='main'>
          <div className='title'>前端js框架列表</div>
          <ul>
            {
                // 不能直接使用for循环-- 原因：jsx中只能混入js表达式
                arr.map((item,index)=> <li key={index}>{item}</li>)
            }
          </ul>
        </div>
    )
    ReactDOM.render(vdom,document.getElementById('test'))
</script>

示例3

<script type="text/babel">
  function Mycomponent(){
    return (
      <div>
        <span>{false}</span>
        <span>{true}</span>
        <span>{null}</span>
        <span>{undefined}</span>
      </div>
    )
  }
  ReactDOM.render(<Mycomponent />,document.getElementById('test'))
</script>

渲染时只渲染了 4个空的span标签如下

示例4

  function Mycomponent(){
    let [count , setCount] = React.useState(0)
    return (
      <div>
        <span>{ count > 10 && '他给的太多了'}</span>
        <button onClick={()=>{setCount( count+1 ); console.log(count > 10 && '他给的太多了') }}>点我++</button>
      </div>
    )
  }
  ReactDOM.render(<Mycomponent />,document.getElementById('test'))