React
-父子组件通信(函数)
通过
this.props
可以在子组件里接收到父组件传递的属性值,其属性值也可以是函数~
子组件CommonPage.jsx
【1】自定义一个按钮;
【2】定义按钮点击事件;
【3】通过this.props
接收到父组件传递过来的属性值 如onJoin
(函数);
【4】若为函数,则直接调用该函数;
【5】「对应子组件」若需要向父组件传参数(比如params
),加在括号里即可。
import React from 'react';
class CommonPage extends React.Component {
// 【2】定义按钮点击事件
join = _throttle(() => {
const params = {
life: 'perfect',
};
// 【3】通过this.props接收到父组件传递过来的属性值 如onJoin(函数)
const { onJoin } = this.props;
// 【4】若为函数,则直接调用该函数
if (typeof onJoin === 'function') {
onJoin(params); // 【5】「对应子组件」若需要向父组件传参数(比如`params`),加在括号里即可
}
})
render() {
return (
<div className="commonPage">
{/* 【1】自定义一个按钮 */}
<div className="realJoinBtn" onClick={this.join}></div>
</div >
);
}
}
export default CommonPage;
父组件LandingPage.jsx
【1】引入子组件
CommonPage
;
【2】调用子组件,并向子组件传递属性值 如onJoin
(函数);
【3】封装函数-点击子组件里的按钮需要进行的操作;
【4】「对应父组件」接收父组件传递过来的参数(比如params
);
【5】进行子组件里的点击操作。
import React from 'react';
import CommonPage from '@src/CommonPage/CommonPage'; // 【1】引入子组件CommonPage
class LandingPage extends React.Component {
// 【3】封装函数-点击子组件里的按钮需要进行的操作
handleJoin = (params) => { // 【4】「对应父组件」接收父组件传递过来的参数(比如params)
console.log('params',params); // params {life: 'perfect'}
/** TODO: 【5】进行子组件里的点击操作 */
}
render() {
return (
<div className="landingPage">
// 【2】调用子组件,并向子组件传递属性值 如onJoin(函数)
<CommonPage onJoin={this.handleJoin}/>
</div >
);
}
}
export default LandingPage;