亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

子組件通過 props 接受父組件傳遞過來的參數

在此過程中 key 屬性不可缺

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

React?中規定在循環標簽的時候，標簽內要添加 key?屬性，且?key?值不能一樣，所以一般值設為循環項的索引值

React?避免 Dom?操作，主要是面向數據操作：

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

constructor( props ){

????super ( props );

????this.state.list [

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

????]

}

然后在視圖標簽中的寫入 { js?表達式（用?map?循環定義中的數據）}?

什么是?jsx?語法？

在定義的組件中：

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

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

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

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

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

react父子組件間參數的傳遞和引用

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

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

知識點總結：

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

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

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

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

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

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

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

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

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

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

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});
}
//構造器
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;