react父子元件傳值 react元件通訊

react元件之間的通訊，其實就是通過乙個props建立彼此之間的橋梁，而我們最常用的就是父子傳值，子父傳值，以及兄弟之間傳值；

1、父元件給子元件傳值；

父元件給子元件傳值相對比較簡單，如果想讓他們倆之間有所聯絡，想傳遞父元件的資料，那麼我們就在父級元件中的子元件標籤上定義乙個屬性，而屬性的值就是我們要傳遞的資料，例如：

父元件：

(child就是子元件，注意開頭字母大寫，而data就是我們定義要傳遞資料的名字，如果能傳遞過去，而我們不想要這個死的資料，我們也可以寫一些動態改變的資料，例如：this.state.datalist)

子元件：react傳值，本身有乙個props這個方法，而我們就可以通過這個方法獲取到父元件給子元件的值，例如：

console.log(this.props)

通過console列印出來，我們就會發現這個props裡面就會有乙個data方法，而這個data方法的值就是父元件給子元件傳遞的值；所以我們就可以通過this.props.data獲取到父元件給子元件的值。

2、子元件給父元件傳值；

父元件通過props向子元件傳入乙個方法，子元件在通過呼叫該方法，將資料以引數的形式傳給父元件，父元件可以在該方法中對傳入的資料進行處理，例如：

//父元件import child from './child.js'；export default class parent extend compenentrender()}//子元件export default class child extend compenentrender()=this.state;return (

}>) }}3、路由傳值；this.props.match.params.name)}}注意：這個方法可以傳遞乙個或多個值，但是每個值的型別都是字串，沒法傳遞乙個物件,如果傳遞的話可以將json物件轉換為字串，然後傳遞過去，傳遞過去之後再將json字串轉換為物件將資料取出來。

//定義路由//設定引數var data = ;data = json.stringify(data);var path = `/user/$`;//傳值使用者//或hashhistory.push(path);//獲取引數var data = json.parse(this.props.params.data);var  = data;

//query方式使用很簡單，類似於表單中的get方法，傳遞引數為明文；//定義路由//設定引數var data = ;var path = //傳值使用者//或hashhistory.push(path);//獲取引數var data = this.props.location.query;var  = data;//state方式類似於post方式，使用方式和query類似；//設定路由//設定引數var data = ;var path = //傳值使用者//或hashhistory.push(path);//獲取引數var data = this.props.location.state;var  = data;

1，獲取引數時要用this.props.match.params.name

2，如果在子元件裡列印要記得傳this.props，如下：

class todolist extends component }export default todolist;5、非父子元件且巢狀關係複雜的元件之間資料的傳遞；通過redux來傳值的實現
export function setanalysisparams(params) }

export default function reducer(state = initialstate, action = {}) ;default:return state;}

當action觸發reducer時，會把action的result傳給reducer的params。寫好這裡，我們就可以在元件中傳給adction params了。

@connect(() => ({}),)

先把actioncreator拿出來。

在元件的某個需要的地方，可以直接向它傳我們要放進redux裡的資料：

this.props.setanalysisparams();

這時，我們就可以在另外乙個元件中取到剛剛放進去的資料。

另外乙個元件：

@connect(state => (),{})

把redux中的params資料對映到example上。

下面，就可以用了：

const  = this.props.example; //取出資料名

加油！程式設計師。。。

react父子元件傳值 react元件通訊

React 父子元件傳值

React父子元件傳值

React父子元件傳值

react父子元件傳值 react元件通訊

React 父子元件傳值

React父子元件傳值

React父子元件傳值

相關推薦