react函数组件子传父

react函数组件是无状态组件，不能直接修改父组件的状态，但可以通过props将数据传递给父组件，让父组件自行处理。

例如，子组件中有一个按钮，当点击按钮时，需要将一个值传递给父组件：

import React from 'react';

function ChildComponent(props) {
  const handleClick = () => {
    props.onClick('hello world');
  }

  return (
    <button onClick={handleClick}>Click me</button>
  );
}

export default ChildComponent;

在子组件中定义一个handleClick函数，当按钮被点击时调用该函数，并将一个值作为参数传递给props.onClick函数。props.onClick函数是父组件传递给子组件的一个函数，当子组件需要向父组件传递数据时，调用该函数即可。

在父组件中，需要将一个函数传递给子组件，用于接收子组件传递的数据：

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [message, setMessage] = useState('');

  const handleClick = (value) => {
    setMessage(value);
  }

  return (
    <div>
      <ChildComponent onClick={handleClick} />
      <p>Message from child: {message}</p>
    </div>
  );
}

export default ParentComponent;

在父组件中定义一个handleClick函数，用于接收子组件传递的数据，并将数据存储在父组件的状态中。然后将该函数作为props传递给子组件。

当子组件被点击时，会调用props.onClick函数，该函数会将一个值传递给父组件的handleClick函数，从而更新父组件的状态。

最后，父组件可以根据状态中的数据来渲染页面。在本例中，父组件会将子组件传递的数据显示在页面上。