一起來學React React父子元件通訊

2021-09-04 11:40:34 字數 1427 閱讀 6508

如果你會vue,那麼你就應該知道,vue是通過props給子元件傳遞引數進行通訊。而react也是通過props傳遞的,但是更加的簡單和容易理解!

父元件:

import list from

'../../common/list/list'

//···

render()

key=

index=

deleteitem=

/>})

}<

/div>

)}

render的list元件中,和自定義屬性一樣article=即可

子元件:

render()

:`/detail/$`

} target=

'_blank'

>

"article-content"

>

"article-title"

>

<

/h3>

<

/div>

<

/link>

<

/div>

)}

子元件直接this.props.***x(其中***x為你在父元件中給子元件傳遞的article=)

然後在子元件中的props中就會有乙個article物件

子父元件通訊是,通過子元件呼叫父元件的方法,傳遞引數進行通訊的。也很簡單!

import list from

'../../common/list/list'

//引用子元件

//···

async

handlelistdelete

(index)

}render()

key=

index=

deleteitem=

/>})

}<

/div>

)}

和上面一樣,但是這次重點是在deleteitem=,這裡把父元件的方法```this.handlelistdelete````傳遞過去了。

子元件:

class

children

extends

component

}

因為父元件是通過deleteitem=把方法傳遞給子元件的,所以子元件中this.props.deleteitem()這個方法對映的就是父元件的方法。

這樣我們就可以在子元件中呼叫父元件的handlelistdelete方法,然後進行傳參,父元件就可以獲得引數了!

一起來學React React跨域設定

前言 可跳過 乍一看,這標題,跨域嘛,多簡單,我直接在package.json,配置proxy不就可以了嗎?如下 proxy https www.fakin.cn 然後一發axios,美滋滋!當你需要多個不同的api介面呢?直接配置proxy成物件?如下 proxy api v2 是不是覺得完事大吉...

一起來學SQL(二)

insert into 語句用於向 中插入新的行。語法 insert into 表名稱 values 值1,值2,也可以指定所要插入資料的列 insert into table name 列1,列2,values 值1,值2,e.g.1 插入新的行 insert into persons value...

一起來學SQL(三)

create database 用於建立資料庫。sql create database 語法 create database database name create table 語句用於建立資料庫中的表。sql create table 語法 create table 表名稱 列名稱1 資料型別,...