子组件向父组件传递数组

在 React 中，子组件向父组件传递数据可以通过回调函数的方式实现。以下是一个示例：

在父组件中，定义一个函数来接收子组件传递的数组：

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

function ParentComponent() {
  const [data, setData] = useState([]);

  const handleData = (array) => {
    setData(array);
  }

  return (
    <div>
      <ChildComponent sendData={handleData} />
      <p>Data received from child component: {data}</p>
    </div>
  );
}

export default ParentComponent;

在子组件中，通过调用父组件传递的回调函数来将数组传递给父组件：

import React from 'react';

function ChildComponent(props) {
  const handleClick = () => {
    const myArray = [1, 2, 3, 4, 5];
    props.sendData(myArray);
  }

  return (
    <button onClick={handleClick}>Send Array to Parent</button>
  );
}

export default ChildComponent;

当子组件中的按钮被点击时，它会调用父组件传递过来的回调函数，并将数组作为参数传递给该函数。父组件接收到数组后，可以在状态中保存它，并在渲染时显示出来。

这样，子组件就成功地将数组传递给了父组件。