ReactJS中如何实现子组件向父组件传递数据

核心实现逻辑 #

React的props是单向数据流，子组件无法直接修改父组件状态或主动发起传值，因此子传父的核心思路是利用回调函数反向传递数据：

• 父组件定义一个带参数的回调函数，用于接收子组件传来的数据并更新自身状态
• 父组件将该回调函数通过props传递给子组件
• 子组件在需要传值的时机（如点击事件）调用这个回调函数，把要传递的数组作为参数传入

修正后的完整代码 #

App组件（父组件） #

import { useState } from "react";
import "./App.css";
import Button from "./components/ClickButton";
import Input from "./components/InputDisplay";

function App() {
    const [btnValue, setBtnValue] = useState([]);

    // 定义接收子组件数据的回调函数
    const onClickHandler = (receivedArray) => {
        setBtnValue(receivedArray);
    };

    return (
        <>
            <div className="container">
                <Input btnValueHandler={btnValue}/>
                {/* 将回调函数通过props传给子组件 */}
                <Button handleOnClick={onClickHandler} />
            </div>
        </>
    );
}

export default App;

Button组件（子组件） #

export default function Button({ handleOnClick }) {
  const buttonOpt = ["Hello", "Bye", "New"];

  return buttonOpt.map((btn, index) => (
    <button 
      key={index} 
      className="click-btn" 
      onClick={() => handleOnClick(buttonOpt)}
    >
      {btn}
    </button>
  ));
}

关键修改点 #

• 父组件的onClickHandler新增参数receivedArray，调用setBtnValue时将该参数作为新状态值
• 子组件按钮的点击事件改为箭头函数，调用父组件传来的handleOnClick时传入内部的buttonOpt数组
• 给列表渲染的按钮添加key属性，符合React列表渲染的规范

推荐学习内容 #

• React官方文档的「状态提升」章节：详细讲解组件间共享状态的核心逻辑，是理解组件通信的基础
• 技术社区中的「React组件通信全总结」类文章：覆盖父子、兄弟、跨层级组件等多种通信场景，适合系统学习

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