如何将有状态数组从子组件传递到父组件？React Hooks

在React中，子组件向父组件传递有状态数组可以通过回调函数的方式实现。以下是一种常见的方法：

在父组件中定义一个状态数组和一个更新状态数组的函数。可以使用useState钩子函数来实现：

import React, { useState } from 'react';

function ParentComponent() {
  const [stateArray, setStateArray] = useState([]);

  // 定义一个回调函数，用于接收子组件传递的状态数组
  const handleStateArray = (array) => {
    setStateArray(array);
  };

  return (
    <div>
      <ChildComponent onStateArrayChange={handleStateArray} />
      {/* 在父组件中使用状态数组 */}
      {stateArray.map((item, index) => (
        <p key={index}>{item}</p>
      ))}
    </div>
  );
}

在子组件中，通过props将状态数组传递给父组件的回调函数。可以使用useState钩子函数来定义子组件的状态数组，并在需要传递给父组件时调用回调函数：

import React, { useState } from 'react';

function ChildComponent(props) {
  const [stateArray, setStateArray] = useState([]);

  // 在子组件中更新状态数组，并调用父组件的回调函数传递给父组件
  const updateStateArray = () => {
    const newArray = ['item1', 'item2', 'item3'];
    setStateArray(newArray);
    props.onStateArrayChange(newArray);
  };

  return (
    <div>
      <button onClick={updateStateArray}>Update State Array</button>
    </div>
  );
}

在上述代码中，当子组件中的按钮被点击时，会更新子组件的状态数组，并通过props调用父组件的回调函数将状态数组传递给父组件。父组件接收到状态数组后，可以在渲染时使用该数组。

这种方法可以实现子组件向父组件传递有状态数组，并且使用React Hooks来管理状态。对于React Hooks的更多信息，可以参考腾讯云的React Hooks介绍：React Hooks介绍。