[JavaScript知识库]2022-10-12 工作记录--React-父子组件通信（函数）

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;