React Native中如何从一个组件访问另一个组件的状态？

嘿，这个问题在React组件通信里太常见了！我给你几个实用的解决方案，你可以根据项目的复杂度来选：

1. 状态提升（最推荐，符合React单向数据流） #

这是React官方最推崇的做法——把表单的状态提升到父组件里。表单组件只负责渲染输入和更新父组件的状态，按钮组件触发父组件里的提交逻辑，这样父组件就能直接拿到所有表单数据啦。

示例代码：

// 父组件
import React, { useState } from 'react';
import { View } from 'react-native';
import FormComponent from './FormComponent';
import SubmitButton from './SubmitButton';

const ParentComponent = () => {
  const [formData, setFormData] = useState({
    username: '',
    password: ''
  });

  // 更新表单状态的方法，传给Form组件
  const handleInputChange = (name, value) => {
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  // 提交逻辑，传给Button组件
  const handleSubmit = () => {
    // 这里就可以直接用formData发送请求啦
    console.log('提交的数据:', formData);
    // fetch('/api/login', { method: 'POST', body: JSON.stringify(formData) })
  };

  return (
    <View>
      <FormComponent formData={formData} onInputChange={handleInputChange} />
      <SubmitButton onPress={handleSubmit} />
    </View>
  );
};

// 表单组件 FormComponent.jsx
import { TextInput, View } from 'react-native';

const FormComponent = ({ formData, onInputChange }) => {
  return (
    <View>
      <TextInput
        value={formData.username}
        onChangeText={(text) => onInputChange('username', text)}
        placeholder="用户名"
      />
      <TextInput
        value={formData.password}
        onChangeText={(text) => onInputChange('password', text)}
        placeholder="密码"
        secureTextEntry
      />
    </View>
  );
};

// 按钮组件 SubmitButton.jsx
import { Button } from 'react-native';

const SubmitButton = ({ onPress }) => {
  return <Button title="登录" onPress={onPress} />;
};

2. 使用useRef + forwardRef（适合简单场景） #

如果不想把状态提升到父组件，你可以用useRef获取表单组件的引用，然后让表单组件暴露一个方法来返回内部状态。这里需要用到forwardRef和useImperativeHandle来定制暴露给父组件的内容。

示例代码：

// 父组件
import React, { useRef } from 'react';
import { View } from 'react-native';
import FormComponent from './FormComponent';
import SubmitButton from './SubmitButton';

const ParentComponent = () => {
  const formRef = useRef(null);

  const handleSubmit = () => {
    // 通过ref获取表单组件的内部数据
    const formData = formRef.current?.getFormData();
    if (formData) {
      console.log('提交的数据:', formData);
      // 发送请求逻辑
    }
  };

  return (
    <View>
      <FormComponent ref={formRef} />
      <SubmitButton onPress={handleSubmit} />
    </View>
  );
};

// 表单组件 FormComponent.jsx
import React, { useState, forwardRef, useImperativeHandle } from 'react';
import { TextInput, View } from 'react-native';

// 用forwardRef把ref传递进来
const FormComponent = forwardRef((props, ref) => {
  const [formData, setFormData] = useState({
    username: '',
    password: ''
  });

  // 定制暴露给父组件的方法
  useImperativeHandle(ref, () => ({
    getFormData: () => formData
  }));

  return (
    <View>
      <TextInput
        value={formData.username}
        onChangeText={(text) => setFormData(prev => ({ ...prev, username: text }))}
        placeholder="用户名"
      />
      <TextInput
        value={formData.password}
        onChangeText={(text) => setFormData(prev => ({ ...prev, password: text }))}
        placeholder="密码"
        secureTextEntry
      />
    </View>
  );
});

// 按钮组件和之前一样
const SubmitButton = ({ onPress }) => {
  return <Button title="登录" onPress={onPress} />;
};

3. 全局状态管理（适合复杂项目） #

如果你的项目比较大，多个组件都需要共享表单数据，那可以用全局状态管理工具，比如Zustand、Redux或者Context API。把表单状态存在全局store里，按钮组件直接从store里取数据提交就行。

举个Zustand的简单例子：

// 定义全局store
import { create } from 'zustand';

const useFormStore = create((set, get) => ({
  formData: { username: '', password: '' },
  updateFormData: (name, value) => {
    set(prev => ({
      formData: { ...prev.formData, [name]: value }
    }));
  },
  getFormData: () => get().formData
}));

// 表单组件
import { TextInput, View } from 'react-native';

const FormComponent = () => {
  const { formData, updateFormData } = useFormStore();

  return (
    <View>
      <TextInput
        value={formData.username}
        onChangeText={(text) => updateFormData('username', text)}
        placeholder="用户名"
      />
      <TextInput
        value={formData.password}
        onChangeText={(text) => updateFormData('password', text)}
        placeholder="密码"
        secureTextEntry
      />
    </View>
  );
};

// 按钮组件
import { Button } from 'react-native';

const SubmitButton = () => {
  const getFormData = useFormStore(state => state.getFormData);

  const handleSubmit = () => {
    const formData = getFormData();
    console.log('提交的数据:', formData);
    // 发送请求逻辑
  };

  return <Button title="登录" onPress={handleSubmit} />;
};

总结一下： #

• 优先用状态提升，这是React的核心思想，代码清晰易维护；
• 简单场景可以用ref，但要注意不要过度使用，避免破坏单向数据流；
• 复杂项目或者多组件共享数据时，用全局状态管理更合适。

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