面试题：React中如何在父子组件间通过Props传递函数并调用

Question

假设有一个父组件Parent和子组件Child，在Parent组件中有一个函数`handleClick`，功能是打印一条消息到控制台。请描述如何将`handleClick`函数通过Props传递给Child组件，并在Child组件中点击一个按钮时调用该函数。请写出关键代码片段。

Answer 1

Parent组件代码

import React from 'react';
import Child from './Child';

class Parent extends React.Component {
  handleClick = () => {
    console.log('按钮被点击了');
  }

  render() {
    return (
      <div>
        <Child handleClick={this.handleClick} />
      </div>
    );
  }
}

export default Parent;

Child组件代码

import React from 'react';

class Child extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.props.handleClick}>点击我</button>
      </div>
    );
  }
}

export default Child;