在 React 中，类组件和函数式组件中的子组件向父组件传递数据的方式

在 React 中，类组件和函数式组件中的子组件向父组件传递数据的方式稍有不同

一、类组件中的子组件向父组件传递数据

通过回调函数：

  父组件通过向子组件传递一个回调函数作为属性
  
  子组件在特定的事件发生时调用这个回调函数，并将需要传递的数据作为参数传递给该回调函数。

 class ParentComponent extends React.Component {
   constructor(props) {
     super(props);
     this.handleChildData = this.handleChildData.bind(this);
   }

   handleChildData(dataFromChild) {
     console.log(dataFromChild);
   }

   render() {
     return (
       <ChildComponent onSendData={this.handleChildData} />
     );
   }
 }

 class ChildComponent extends React.Component {
   handleClick() {
     this.props.onSendData('Data from child component');
   }

   render() {
     return (
       <button onClick={this.handleClick}>Send Data to Parent</button>
     );
   }
 }
 

二、函数式组件中的子组件向父组件传递数据 同样通过回调函数：

与类组件类似，父函数式组件向子组件传递一个回调函数作为属性。 - 子组件在适当的时候调用这个回调函数来传递数据给父组件。

const ParentComponent = () => {
     const handleChildData = (dataFromChild) => {
       console.log(dataFromChild);
     };

     return (
       <ChildComponent onSendData={handleChildData} />
     );
   };

   const ChildComponent = ({ onSendData }) => {
     return (
       <button onClick={() => onSendData('Data from child component')}>Send Data to Parent</button>
     );
   };

总的来说，无论是类组件还是函数式组件，子组件向父组件传递数据主要是通过父组件传递给子组件的回调函数来实现的