React---day2

2、jsx焦点语法

2.1 class

和java很像啊

1.    <script>
2.         // 定义一个对象
3.         class Person {
4.             //构造函数
5.             constructor(name , age){
6.                 this.name = name;
7.                 this.age = age;
8.             }
9.             // 定义一个方法
10.             sayHello(){
11.                 console.log(`hello ${this.name}`);
12.             }
13.         }
14.         // 创建一个对象
15.         Person1 = new Person('张三' , 18);
16.         // 调用对象的方法
17.         Person1.sayHello();
18.         // 继承：提高代码复用性
19.         class Student extends Person{
20.             // 构造函数
21.             constructor(name , age , score){
22.                 // 调用父类的构造函数
23.                 super(name , age);
24.                 this.score = score;
25.             }
26.             // 重写父类的方法
27.             sayHello(){
28.                 // 调用父类的方法
29.                 super.sayHello();
30.                 console.log(`我的分数是${this.score}`);
31.             }
32.         }
33.         // 创建一个对象
34.         Student1 = new Student('李四' , 20 , 100);
35.         // 调用对象的方法
36.         Student1.sayHello();
37.     </script>

复制代码

2.2 嵌入数据

2.2.1 嵌入变量

在{}中可以正常表现的内容：

1.                     name:"jyx" , //String
2.                     age: 20 , //Number
3.                     names:["axigg" , "abc"],//Array

复制代码

在{}中不能正常表现的内容(忽略)

1.                     text1:null,//null
2.                     text2:undefined,//undefied
3.                     test3:false,//boolean

复制代码

为什么???就是制止出现undefied表如今页面上的环境
2.2.2 嵌入表达式

1.               <h2>{firstname + lastname}</h2>
2.               <h2>{5 * 3}</h2>
3.               <h2>{isLogin ? "成功登录" : "登录失败"}</h2>
4.               <h2>{this.getFullName()}</h2>

复制代码

2.3 绑定

2.3.1 绑定属性

主要就是两个class和style

1. {/*绑定class , className*/}
2.               <div className="title">我是className</div>
3.               {/*绑定style , 小驼峰*/}
4.               <div style={{
5.                     color: "red",
6.                     fontSize: "20px",
7.                     backgroundColor: "yellow",
8.                     padding: "10px"
9.                 }
10.               }>绑定style</div>

复制代码

2.3.2 绑定事件

绑定事件就是onClick，但是肯定要留意this的实行

1. <script type="text/babel">
2.         class App extends React.Component {
3.             constructor() {
4.                 super()
5.                 this.state = {
6.                     message:"我是h2",
7.                     num:0
8.                 }
9.                 // 初始化的时候就绑定this
10.                 this.increaseNum = this.increaseNum.bind(this)
11.             }
12.             render() {
13.                 return (
14.                     <div>
15.                         <h2 onClick={this.btnClick.bind(this)}>点击我</h2>
16.                         <h3 onClick={this.increaseNum}>加1</h3>
17.                         <h2 onClick={this.showNum}>展示数字</h2>
18.                     </div>
19.                 )
20.             }
21.             btnClick() {
22.                 console.log(this.state.message)
23.             }
24.             increaseNum() {
25.                 console.log(this.state.num + 1)
26.             }
27.             showNum =  () => {
28.                 console.log(this.state.num)
29.             }
30.         }
31.         ReactDOM.render(<App />, document.getElementById('app'))
32.     </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是通过条件判断来决定是否渲染该元素。
  
  1. <h4 style={{ display: isLogin ? "block" : "none" }}>
  2.                 欢迎公主回家
  3.               </h4>

  复制代码

2.4.2 列表渲染

• 使用map高阶函数
  
• 1.    <ul>
  2.                             <h2>数组展示</h2>
  3.                             {
  4.                                 this.state.foods.map((item , index , arr) => {
  5.                                     return (
  6.                                         <li key={index}>
  7.                                             {item}
  8.                                         </li>
  9.                                     )
  10.                                 })
  11.                             }
  12.                         </ul>

  复制代码
• filter:举行过滤
  
• 1. <ul>
  2.                             <h2>数组筛选</h2>
  3.                             {
  4.                                 this.state.num.filter((item , index , arr) => {
  5.                                     if( item % 2 === 0) {
  6.                                         return true
  7.                                     } else {
  8.                                         return false
  9.                                     }
  10.                                 }).map((item , index , arr)=> {
  11.                                     return (
  12.                                         <li key={index}>
  13.                                             {item}
  14.                                         </li>
  15.                                     )
  16.                                 })
  17.                             }
  18.                         </ul>

  复制代码
• slice:举行截取
  
• 1.     <ul>
  2.                             <h2>数组截取</h2>
  3.                             {
  4.                                 this.state.foods.slice(0,3).map((item , index , arr) => {
  5.                                     return (
  6.                                         <li>
  7.                                             {item}
  8.                                         </li>
  9.                                     )
  10.                                 })
  11.                             }
  12.                         </ul>

  复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。