React：父组件能否通过传入的Props获取子组件状态？

嘿，作为React新手能想到用实践来巩固理解真的超棒！针对你的需求，完全可以实现通过父组件传入的Props来获取并打印子组件的状态，我给你一步步拆解实现方式：

核心思路 #

子组件通过调用父组件传递过来的回调函数，把自身的状态作为参数传给这个函数，父组件就能在回调里拿到子组件状态并打印啦。

类组件实现示例 #

子组件代码 #

class ChildComponent extends React.Component {
  // 子组件自身的状态
  state = { animal: 'Lion' };

  render() {
    return (
      {/* 点击按钮时，把自身state传给父组件的giveMeState方法 */}
      <button onClick={() => this.props.giveMeState(this.state)}>
        点击打印子组件状态
      </button>
    );
  }
}

父组件代码 #

class ParentComponent extends React.Component {
  // 父组件自身的状态
  state = { name: 'John' };

  // 定义接收子组件状态的方法
  giveMeState = (childState) => {
    console.log('子组件的状态：', childState);
    // 如果你需要，也可以把子组件状态存在父组件的state里
    // this.setState({ childAnimal: childState.animal });
  };

  render() {
    return (
      <div>
        {/* 把giveMeState方法作为props传给子组件 */}
        <ChildComponent giveMeState={this.giveMeState} />
      </div>
    );
  }
}

函数组件+Hook实现示例（React推荐写法） #

如果你已经开始接触Hook，也可以用更轻量化的函数组件来实现：

子组件代码 #

import { useState } from 'react';

function ChildComponent({ giveMeState }) {
  // 用useState定义子组件状态
  const [animal, setAnimal] = useState('Lion');

  return (
    <button onClick={() => giveMeState({ animal })}>
      点击打印子组件状态
    </button>
  );
}

父组件代码 #

import { useState } from 'react';

function ParentComponent() {
  // 父组件自身状态
  const [name, setName] = useState('John');

  const giveMeState = (childState) => {
    console.log('子组件的状态：', childState);
  };

  return (
    <div>
      <ChildComponent giveMeState={giveMeState} />
    </div>
  );
}

关键说明 #

• 本质是回调函数的传递：父组件把一个函数通过props传给子组件，子组件触发这个函数时带上自己的状态数据
• 这样的方式也常用于「子组件向父组件传递数据」，是React中组件通信的基础方式之一

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