React中如何将子组件的最新状态传递给父组件

嘿，这个问题是React开发里非常常见的场景——子组件更新内部状态后，要把最新状态同步给父组件。核心解决思路是利用回调函数（或者状态提升）来实现数据从子到父的传递，下面给你两种可行的方案，你可以根据项目需求选择：

方案一：子组件保留内部状态，通过回调传递给父组件 #

这种方案适合子组件需要自己维护状态，同时还要把状态同步给父组件的场景：

修改后的App.js #

import React, { useState } from 'react';
import './App.css';
import Child from './Child/Child';

function App() {
  // 定义状态存储子组件传递过来的颜色值
  const [childBgColor, setChildBgColor] = useState('yellow');
  const [childTextColor, setChildTextColor] = useState('white');

  // 回调函数：接收子组件传过来的最新状态
  const handleChildStateChange = (newBgColor, newTextColor) => {
    setChildBgColor(newBgColor);
    setChildTextColor(newTextColor);
  };

  return(
    <div className='container'>
      <div className='row'>
        {/* 用子组件同步过来的状态控制按钮样式 */}
        <button 
          className='btn btn-primary'
          style={{ background: childBgColor, color: childTextColor }}
        >
          Click here
        </button>
        {/* 把回调函数通过props传给子组件 */}
        <Child onStateChange={handleChildStateChange}></Child>
      </div>
    </div>
  )
}

export default App

修改后的Child.js #

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

// 接收父组件传递的回调函数props
function Child({ onStateChange }) {
  const [color, setColor] = useState('yellow');
  const [textColor, setTextColor] = useState('white');

  const handleButtonClick = () => {
    const newBgColor = "black";
    const newTextColor = "red";
    // 先更新子组件自己的内部状态
    setColor(newBgColor);
    setTextColor(newTextColor);
    // 调用父组件的回调，把最新状态传回去
    onStateChange(newBgColor, newTextColor);
  };

  return (
    <div className='container'>
      <div className='row'>
        <button 
          style={{ background: color, color: textColor }} 
          onClick={handleButtonClick}
          className='btn btn-danger mt-5'
        >
          Click here
        </button>
      </div>
    </div>
  )
}

export default Child

方案二：状态完全提升到父组件（推荐简单场景） #

如果子组件不需要独立维护状态，完全可以把状态统一放在父组件中，子组件只负责触发状态更新，这样能避免状态分散，更易维护：

修改后的App.js #

import React, { useState } from 'react';
import './App.css';
import Child from './Child/Child';

function App() {
  // 所有状态都放在父组件中管理
  const [bgColor, setBgColor] = useState('yellow');
  const [textColor, setTextColor] = useState('white');

  // 统一的状态更新函数
  const updateColorStates = () => {
    setBgColor("black");
    setTextColor("red");
  };

  return(
    <div className='container'>
      <div className='row'>
        {/* 直接用父组件的状态控制按钮样式 */}
        <button 
          className='btn btn-primary'
          style={{ background: bgColor, color: textColor }}
        >
          Click here
        </button>
        {/* 把状态和更新函数都传给子组件 */}
        <Child 
          bgColor={bgColor} 
          textColor={textColor} 
          onUpdate={updateColorStates}
        ></Child>
      </div>
    </div>
  )
}

export default App

修改后的Child.js #

import React from 'react';
import './Child.css';

// 子组件不再维护状态，完全依赖父组件传递的props
function Child({ bgColor, textColor, onUpdate }) {
  return (
    <div className='container'>
      <div className='row'>
        <button 
          style={{ background: bgColor, color: textColor }} 
          onClick={onUpdate}
          className='btn btn-danger mt-5'
        >
          Click here
        </button>
      </div>
    </div>
  )
}

export default Child

核心原理说明 #

React是单向数据流，数据只能从父组件流向子组件，所以子组件要给父组件传数据，必须通过父组件提供的回调函数来实现：

1. 父组件定义一个接收数据的函数，并通过props传递给子组件
2. 子组件在状态更新时调用这个回调函数，把最新数据作为参数传进去
3. 父组件接收到数据后，更新自己的状态，进而更新UI

这样就能实现子组件状态和父组件的同步啦~

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