1.組件之進行通信的幾種情況
- 父組件向子組件通信
- 子組件向父組件通信
- 跨級組件通信
- 沒有嵌套關係組件之間的通信
2. 父組件向子組件通信
a. props
b. ref
如下示例：父組件中對子組件添加標識：ref={this.headRef}， 就可以調用子自己的方法
import React, { Component } from 'react';
import Head from './components/Head'
class App extends Component {
constructor() {
super()
this.headRef = React.createRef()
}
changeHeadTitle = () => {
this.headRef.changeTitle('詳情')
}
render() {
return (
<div className="App">
<button onClick={this.changeHeadTitle}>改變子組件title</button>
<Head subTitle={'sub'} ref={this.headRef}/>
</div>
);
}
}
export default App;
子組件
import React, { Component } from 'react'
class Head extends Component {
constructor(...agrs) {
super(...agrs)
this.state = {
subTitle: this.props.subTitle
}
}
changeTitle (title) {
this.setState({
subTitle: title
})
}
render () {
return (
<div>
header
<div>{this.state.subTitle}</div>
</div>
)
}
}
export default Head
3. 子組件向父組件通信
a. 利用回調函數
import React, { Component } from 'react';
import Head from './components/Head'
class App extends Component {
constructor() {
super()
this.state = {
title: 'App',
isShowTitle: true
}
}
hiddenTitle = () => {
this.setState({
isShowTitle: !this.state.isShowTitle
})
}
render() {
return (
<div className="App">
<div className="AppName">{this.state.isShowTitle ? this.state.title : ''}</div>
<Head subTitle={'sub'} ref="head" hiddenTitle={this.hiddenTitle}/>
</div>
);
}
}
export default App;
將父組件函數傳給子組件。通過this.props.hiddenTitle調用父組件函數
import React, { Component } from 'react'
class Head extends Component {
constructor(...agrs) {
super(...agrs)
}
render () {
return (
<div>
header
<button onClick={this.props.hiddenTitle}>切換父組件顯示</button>
</div>
)
}
}
export default Head
b. 將父組件this當參數傳遞給子組件
render() {
return (
<div className="App">
<div className="AppName">{this.state.isShowTitle ? this.state.title : ''}</div>
<Head subTitle={'sub2'} parent={this}/>
</div>
);
}
子組件可以使用父組件的this
render () {
return (
<div>
header
<button onClick={this.props.parent.hiddenTitle}>切換父組件顯示2</button>
</div>
)
}
4. redux
針對跨級組件和沒有嵌套關係組件等，可以使用
- 層層組件傳遞props
- 使用自定義事件機制
但是，這裏建議使用redux狀態管理，請見下回分解：redux