react组件的子组件向父组件传递参数（子传父）

react的子传父是通过自定义事件实现的。首先在父组件中定义一个自定义事件，然后将这个自定义事件传递给子组件。子组件通过props接收这个父组件传递过来的自定义事件，最后在子组件中调用这个事件并传参。

import React from 'react';
//定义子组件
const Child = ({ onButtonClick }) => {
//在子组件中触发从父组件传过来的事件
  const handleClick = () => {
    onButtonClick('子组件的数据!');
  };

  return (
//触发事件
    <button onClick={handleClick}>Click Me</button>
  );
};

//定义父组件
const Parent = () => {
//在父组件中定义自定义事件。这里的data就是子组件传过来的
  const handleChildData = (data) => {
    console.log(data);
  };

  return (
    <div>
      <Child onButtonClick={handleChildData} />
    </div>
  );
};

export default Parent;

在上述例子中，Child 是子组件，它接收一个从父组件传递过来 的名为 onButtonClick 的函数 。当按钮被点击时，子组件调用 onButtonClick 回调函数，并传递一个字符串作为参数。

Parent 是父组件，它定义了名为 handleChildData 的回调函数来接收子组件传递的数据。在这个例子中，handleChildData 函数简单地将传递的数据打印到控制台。

在 Parent组件中，我们将 handleChildData 函数作为 onButtonClick 的值传递给 Child组件。这样子组件就能够在按钮点击事件发生时调用父组件中定义的回调函数，并传递数据给父组件。

通过这种方式，子组件可以向父组件传递参数或数据，实现了组件间的通信。