ReactJS中如何将子组件的数组传递给父组件

在React中，数据是单向向下流动的，子组件要向父组件传递数据，需要通过父组件传递回调函数的方式实现，具体步骤如下：

• 父组件定义一个用于接收数据的回调函数，将其作为props传递给子组件
• 子组件调用该回调函数，把需要传递的数组作为参数传入

修改后的完整代码： #

父组件（Parent.jsx）

import { useState } from 'react';
import Child from './Child';

export default function Parent() {
  // 用state存储从子组件接收的数组
  const [receivedArr, setReceivedArr] = useState([]);

  // 接收子组件传递的数组
  const handleReceiveArray = (arr) => {
    setReceivedArr(arr);
    console.log('子组件传来的数组：', arr);
  };

  return (
    <>
      <div>Parent</div>
      {/* 展示从子组件收到的数组 */}
      <div>子组件传递的数组：{receivedArr.join(', ')}</div>
      {/* 将回调函数通过props传给子组件 */}
      <Child onSendArray={handleReceiveArray} />
    </>
  );
}

子组件（Child.jsx）

import { useEffect } from 'react';

// React组件名必须首字母大写，否则会被识别为普通HTML标签
export default function Child({ onSendArray }) {
  const arr = ["1020","52214","3325"];

  // 这里选择在组件挂载后传递数组，也可以绑定到按钮点击等事件触发
  useEffect(() => {
    onSendArray(arr);
  }, [onSendArray]);

  return (
    <div>Child</div>
  );
}

关键说明： #

• 组件名必须首字母大写，这是React的强制规范，避免与原生HTML标签冲突
• 传递数据的时机可以根据业务需求调整：比如点击按钮时触发、数组数据变化时触发，示例中使用useEffect在组件挂载完成后自动传递
• 父组件通过state存储接收的数组，就能在父组件中使用或展示该数组了

内容的提问来源于stack exchange，提问作者Chanka1021