React---day2

2、jsx核心语法

2.1 class

和java很像啊

复制代码
   <script>
        // 定义一个对象
        class Person {
            //构造函数
            constructor(name , age){
                this.name = name;
                this.age = age;
            }
            // 定义一个方法
            sayHello(){
                console.log(`hello ${this.name}`);
            }
        }
        // 创建一个对象
        Person1 = new Person('张三' , 18);
        // 调用对象的方法
        Person1.sayHello();
        // 继承:提高代码复用性
        class Student extends Person{
            // 构造函数
            constructor(name , age , score){
                // 调用父类的构造函数
                super(name , age);
                this.score = score;
            }
            // 重写父类的方法
            sayHello(){
                // 调用父类的方法
                super.sayHello();
                console.log(`我的分数是${this.score}`);
            }
        }
        // 创建一个对象
        Student1 = new Student('李四' , 20 , 100);
        // 调用对象的方法
        Student1.sayHello();
    </script>

2.2 嵌入数据

2.2.1 嵌入变量

在{}中可以正常显示的内容:

复制代码
                    name:"jyx" , //String
                    age: 20 , //Number
                    names:["axigg" , "abc"],//Array

在{}中不能正常显示的内容(忽略)

复制代码
                    text1:null,//null
                    text2:undefined,//undefied
                    test3:false,//boolean

为什么???就是避免出现undefied显示在页面上的情况

2.2.2 嵌入表达式
复制代码
              <h2>{firstname + lastname}</h2>
              <h2>{5 * 3}</h2>
              <h2>{isLogin ? "成功登录" : "登录失败"}</h2>
              <h2>{this.getFullName()}</h2>

2.3 绑定

2.3.1 绑定属性

主要就是两个class和style

复制代码
 {/*绑定class , className*/}
              <div className="title">我是className</div>
              {/*绑定style , 小驼峰*/}
              <div style={{
                    color: "red",
                    fontSize: "20px",
                    backgroundColor: "yellow",
                    padding: "10px"
                }
              }>绑定style</div>
2.3.2 绑定事件

绑定事件就是onClick,但是一定要注意this的执行

复制代码
 <script type="text/babel">
        class App extends React.Component {
            constructor() {
                super()
                this.state = {
                    message:"我是h2",
                    num:0
                }
                // 初始化的时候就绑定this
                this.increaseNum = this.increaseNum.bind(this)
            }
            render() {
                return (
                    <div>
                        <h2 onClick={this.btnClick.bind(this)}>点击我</h2>
                        <h3 onClick={this.increaseNum}>加1</h3>
                        <h2 onClick={this.showNum}>展示数字</h2>
                    </div>
                )
            }
            btnClick() {
                console.log(this.state.message)
            }
            increaseNum() {
                console.log(this.state.num + 1)
            }
            showNum =  () => {
                console.log(this.state.num)
            }
        }
        ReactDOM.render(<App />, document.getElementById('app'))
    </script>

​ 在btnClick中打印this,结果是undefined

​ 这是因为btnClick方法没有被绑定到组件实例上,btnClick方法在被调用时,this指向了全局对象而不是组件实例,this默认为undefined。

  • 解决方法1:在构造函数中使用this.btnClick = this.btnClick.bind(this) --- 显式绑定,不常见
  • 解决方法2: 给btn函数在初始化的时候就绑定this
  • 解决方法3:使用箭头函数,箭头函数不会创建自己的this,它会捕获上下文中的this值

2.4 渲染

2.4.1 条件渲染
  • 在JSX中可以使用三元运算符来进行条件渲染。

例如:{isLogin ?

欢迎回来

:

请先登录

}

  • 也可以使用逻辑与运算符(&&)来简化条件渲染。

    例如:{isLogin &&

    你好啊,蒋乙菥

    }

  • v-show是通过设置元素的style属性来控制显示和隐藏,而v-if是通过条件判断来决定是否渲染该元素。

    复制代码
     <h4 style={{ display: isLogin ? "block" : "none" }}>
                    欢迎公主回家
                  </h4>
2.4.2 列表渲染
  • 使用map高阶函数

复制代码
     <ul>
                              <h2>数组展示</h2>
                              {
                                  this.state.foods.map((item , index , arr) => {
                                      return (
                                          <li key={index}>
                                              {item}
                                          </li>
                                      )
                                  })
                              }
                          </ul>
  • filter:进行过滤

复制代码
   <ul>
                              <h2>数组筛选</h2>
                              {
                                  this.state.num.filter((item , index , arr) => {
                                      if( item % 2 === 0) {
                                          return true
                                      } else {
                                          return false
                                      }
                                  }).map((item , index , arr)=> {
                                      return (
                                          <li key={index}>
                                              {item}
                                          </li>
                                      )
                                  })
                              }
                          </ul>
  • slice:进行截取

复制代码
      <ul>
                              <h2>数组截取</h2>
                              {
                                  this.state.foods.slice(0,3).map((item , index , arr) => {
                                      return (
                                          <li>
                                              {item}
                                          </li>
                                      )
                                  })
                              }
                          </ul>
相关推荐
EndingCoder12 分钟前
React从基础入门到高级实战:React 生态与工具 - React 单元测试
前端·javascript·react.js·typescript·单元测试·前端框架
年纪轻轻只想躺平1 小时前
Vue2部分知识点和注意项
前端·javascript·vue.js
多则惑少则明2 小时前
Vue开发系列——Vue 生命周期钩子 及常见知识点
前端·javascript·vue.js·前端框架
菥菥爱嘻嘻3 小时前
JS手写代码篇---Pomise.race
开发语言·前端·javascript
CodeCipher4 小时前
前端Vue3列表滑动无限加载实现
前端·javascript·vue.js·vue
十碗饭吃不饱5 小时前
vue修改配置文件.env.development不生效
前端·javascript·vue.js
二十雨辰7 小时前
[CSS3]vw/vh移动适配
前端·css·css3
Catfood_Eason7 小时前
HTML5基础
前端·html·html5
软件开发技术深度爱好者7 小时前
用HTML5+JavaScript实现汉字转拼音工具
前端·javascript·html5
烂笔头儿@8 小时前
vue 实现table上下拖拽行功能
前端·javascript·vue.js