React Native中如何从父组件获取子组件的状态

嘿，这个场景在React开发里太常见了！我给你分享两种实用的解决方案，优先推荐第一种，因为它完全符合React的单向数据流设计理念：

1. 通过Props传递回调函数（最推荐） #

这种方式是React官方推崇的做法，核心思路是父组件提供一个回调函数，子组件在状态更新时调用这个函数，把最新的状态值传递给父组件。这样既保持了组件间的单向数据流，又能让父组件实时拿到子组件的状态。

代码示例： #

父组件（Home.js）

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

function Home() {
  // 父组件维护状态接收子组件的输入值
  const [formValue, setFormValue] = useState('');

  // 定义回调函数，用于接收子组件传来的值
  const handleFormChange = (value) => {
    setFormValue(value);
    console.log("父组件拿到的子组件状态：", value);
  };

  return (
    <div>
      <h1>Home组件</h1>
      {/* 把回调函数传给子组件 */}
      <Form onValueChange={handleFormChange} />
      <p>子组件输入的内容：{formValue}</p>
    </div>
  );
}

export default Home;

子组件（Form.js）

import { useState } from 'react';

function Form({ onValueChange }) {
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (e) => {
    const newValue = e.target.value;
    setInputValue(newValue);
    // 调用父组件传来的回调函数，传递最新值
    onValueChange(newValue);
  };

  return (
    <div>
      <input 
        type="text" 
        value={inputValue} 
        onChange={handleInputChange} 
        placeholder="输入内容..."
      />
    </div>
  );
}

export default Form;

2. 使用Ref获取子组件实例（谨慎使用） #

这个方法可以直接获取子组件的实例，从而访问其内部状态，但不推荐在常规场景使用——因为它会打破React的单向数据流，导致组件耦合度变高，后期维护难度增大。不过如果子组件是第三方组件或者你没法修改子组件代码时，可以考虑这种方式。

代码示例： #

父组件（Home.js）

import { useRef } from 'react';
import Form from './Form';

function Home() {
  const formRef = useRef(null);

  // 比如通过按钮点击触发获取子组件状态
  const getFormValue = () => {
    if (formRef.current) {
      console.log("通过Ref拿到的子组件状态：", formRef.current.inputValue);
    }
  };

  return (
    <div>
      <h1>Home组件</h1>
      <Form ref={formRef} />
      <button onClick={getFormValue}>获取子组件输入值</button>
    </div>
  );
}

export default Home;

子组件（Form.js）

import { useState, forwardRef, useImperativeHandle } from 'react';

// 用forwardRef把ref传递给子组件内部
const Form = forwardRef((props, ref) => {
  const [inputValue, setInputValue] = useState('');

  // 用useImperativeHandle暴露子组件状态给父组件
  useImperativeHandle(ref, () => ({
    inputValue
  }));

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <div>
      <input 
        type="text" 
        value={inputValue} 
        onChange={handleInputChange} 
        placeholder="输入内容..."
      />
    </div>
  );
});

export default Form;

总结 #

• 优先选择回调函数的方式，它更符合React的设计原则，组件间的关系更清晰，也更容易维护。
• Ref的方式只适合特殊场景，尽量避免在常规业务中使用，防止组件耦合。

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