react 元件通訊

父元件通過props向子元件傳遞需要的資訊

parent.jsx

import react,  from 'react';

import son from '../components/test1';
class
parent
extends
component
render() 
}export default parent;

import react,  from 'react';

class
sonextends
component 
componentdidmount() 
render() div>);
}}export default son;

import react,  from 'react';

class
sonextends
component 
componentdidmount() 
render() >隱藏);
}}export default son;

import react,  from 'react';

import son from '../components/test2';
class
home
extends
component
}  showcomponent() )
}  hidecomponent() )
}  render() }>
this.showcomponent.bind(this)}>顯示
this.hidecomponent.bind(this)} />
div>)}}
export default home;

1. 中間元件層層傳遞props

2. 使用context物件

第一種props傳遞方式，元件巢狀過深時，不推薦使用

第二種context方式，context就相當於乙個全域性變數，這樣通訊就很方便了

context通訊使用方式：

1.上級元件要宣告context，並提供乙個函式返回相應的context物件

2.子元件使用context，需要宣告

React元件通訊

分類 父子元件通訊 無論父元件傳遞是props還是state,子元件都是通過props接收 子父元件通訊 父元件傳遞方法給子元件，子元件呼叫父元件傳遞過來的方法 注意 自己的狀態自己更改 非父子元件通訊 ref鏈 1.ref this.refs.2.ref this.推薦 跨元件通訊 context...

react元件通訊

元件是封閉的，要接收外部資料應該通過 props 來實現 props的作用 接收傳遞給元件的資料 傳遞資料 給元件標籤新增屬性 接收資料 函式元件通過引數props接收資料，類元件通過 this.props 接收資料 function hello props class hello extends ...

React元件通訊 高階元件

子父元件通訊 非父子元件通訊 跨元件通訊 在react沒有類似vue中的事件匯流排來解決這個問題，我們只能借助它們共同的父級元件來實現，將非父子關係裝換成多維度的父子關係。react提供了contextapi來實現跨元件通訊,react 16.3之後的contextapi較之前的好用。使用流程 im...