第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

父組件通過屬性的形式向子組件傳遞參數(shù)

子組件通過 props 接受父組件傳遞過來的參數(shù)

在此過程中 key 屬性不可缺

關(guān)于?js?中?this?的難點參考~https://www.cnblogs.com/long-long/p/6741083.html

React?中規(guī)定在循環(huán)標簽的時候，標簽內(nèi)要添加 key?屬性，且?key?值不能一樣，所以一般值設(shè)為循環(huán)項的索引值

React?避免 Dom?操作，主要是面向數(shù)據(jù)操作：

定義 state (組建中存放數(shù)據(jù)的地方)

constructor( props ){

????super ( props );

????this.state.list [

????????......

????]

}

然后在視圖標簽中的寫入 { js?表達式（用?map?循環(huán)定義中的數(shù)據(jù)）}?

什么是?jsx?語法？

在定義的組件中：

1.可以直接返回視圖標簽不報錯。

2.外層必須要有一個根標簽包裹著

3.根標簽內(nèi)部可以寫?js?表達式，會自動編譯，js?語句會報錯

4. index.js?中 render?中引用組件時，組件名寫在標簽符號內(nèi)。

子組件向父組件傳值，子組件調(diào)用父組件傳遞過來的方法，在子組件中寫?this.props.方法名(參數(shù))

react父子組件間參數(shù)的傳遞和引用

父組件通過屬性的形式向子組件傳遞數(shù)據(jù)， 子組件通過props的形式接受父組件的數(shù)據(jù)。

jsx里只能寫表達式，不能寫語句。

知識點總結(jié)：

1. react 組件都是以大寫字母開頭，組件就是一個類然后繼承 React.Component，就是一個react組件，react 組件中必須有一個 render

2. ?jsx: 直接在js中寫 html 標簽，也可以在在 {} 中寫 js 表達式(不能寫 js 語句)；

3. react 中的 return 只能返回一個 jsx 也就是說只能有一個父標簽；

4. ?父組件通過屬性的形式向子組件傳遞參數(shù)，子組件通過 props 接收參數(shù)；

5. 由于每一個組件中必須有一個根元素，但是處于一些原有不想讓其表露出來時，可以用 <React.Fragment></React.Fragment>代替；

6. 簡化代碼：將jsx 中的 js集中部分單獨作為一個函數(shù)；在頂部引入

   import React, { Component, Fragment } from 'react'，便可以將后面代碼中的??React.Fragment 簡化為?Fragment（此標簽中不能帶類名） ，React.Component簡化為?Component；在函數(shù)中定義 const {handleDelete,index} = this.props 以后，使用?handleDelete 就相當于?this.props.handleDelete;

7. 一般 bind(this) 寫在 constructor 函數(shù)中更規(guī)范。

父組件向子組件傳值，用屬性

子組件向父組件傳值，用方法

import?React,{?Component?}?from?'react';
class?TodoList?extends?Component{
handlerClick(){
this.setState({
list:[...this.state.list,this.state.inputvalue],
inputvalue:''
})
//this.state.list.push('1');
}
handleInput(e){
this.setState({
inputvalue:e.target.value
});
}
handlerDel(index){
const?list=[...this.state.list];
list.splice(index,1);
this.setState({list});
}
//構(gòu)造器
constructor(props){
super(props);
this.state={
list:[
'learn?react',
'learn?english',
'learn?vue'
],
inputvalue:''
}
}
render(){
return(
<div>
<div>
<input?value={this.state.inputvalue}?onChange={this.handleInput.bind(this)}/>
<button?onClick={this.handlerClick.bind(this)}>add</button>
</div>
<ul>
{
this.state.list.map((item,index)=>{
return?<li?key={index}?onClick={this.handlerDel.bind(this,index)}>{item}</li>
})
}
</ul>
</div>
);
}
}
export?default?TodoList;