在 React 第十一篇了解透過 element 傳遞 props，此篇要介紹要寫傳父組件裡的方法給子組件。
tom_yukuan
import React, { Component } from 'react'
import Child from './Child';
class Parent extends Component {
constructor(props) {
super(props)
this.state = {
parentName: "parent"
}
// 需綁定 this，否則會找不到 hello method
this.hello = this.hello.bind(this);
}
hello() {
console.log(`Hello ${this.state.parentName}`);
}
render() {
return (
<div>
<button onClick={this.hello}>button</button>
</div>
)
}
}
export default Parent
確認按了按鈕，有印出 Hello Parent
render() {
return (
<div>
// 把方法當作 element 傳遞下去給 Child 組件
<Child hello = {this.hello}/>
</div>
)
}
import React, { Component } from 'react'
class Child extends Component {
render() {
return (
<div>
// 收到來自 parent 的 props，使用 hello method
<button onClick={this.props.hello}>button</button>
</div>
)
}
}
export default Child
確認按了按鈕，印出 Hello Parent
因此現在我們會用傳遞的方式拿到父組件的方法。
Parent.js 父組件
hello(childName) {
console.log(`Hello ${this.state.parentName} from ${childName}`);
}
Child.js 子組件
render() {
return (
<div>
// 傳入參數 Child
<button onClick={() => this.props.hello('child')}>button</button>
</div>
)
}
確認取得子組件傳來的參數，並印出 Child
當初學會這個方式的時候，覺得很方便，在我們組內有時候也會透過這個寫法達到某些目的，用 method 當作 props 這事情也是之後文章會常寫的寫法。
iThome鐵人賽
看影片追技術