React Native + TypeScript：祖孙组件向父组件的Props传递问题

1. 父组件（HomeTeamInfo.tsx）：定义状态与接收回调 #

父组件维护最终表单数据的状态，同时定义一个回调函数，将其传递给子组件用于接收数据。

import React, { useState } from 'react';
import { View, Button } from 'react-native';
import AddPlayer from './AddPlayer';

const HomeTeamInfo = () => {
  // 存储最终表单数据的状态
  const [formData, setFormData] = useState({
    playerName: '',
    awayTeam: ''
  });

  // 接收子组件传来数据的回调函数
  const handleSaveData = (data: { playerName: string; awayTeam: string }) => {
    setFormData(prev => ({ ...prev, ...data }));
    // 可在此添加关闭Modal、提交表单等后续逻辑
  };

  return (
    <View>
      {/* 原有表单内容 */}
      <AddPlayer onSave={handleSaveData} />
    </View>
  );
};

export default HomeTeamInfo;

2. 子组件（AddPlayer.tsx）：收集自身数据并传递回调给孙组件 #

子组件管理自身TextInput的状态，同时将父组件的回调传递给孙组件，最后在点击SAVE按钮时汇总所有数据，通过回调传给父组件。

import React, { useState } from 'react';
import { View, TextInput, Button, Modal } from 'react-native';
import AwayTeamInfo from './AwayTeamInfo';

interface AddPlayerProps {
  onSave: (data: { playerName: string; awayTeam: string }) => void;
}

const AddPlayer: React.FC<AddPlayerProps> = ({ onSave }) => {
  const [playerName, setPlayerName] = useState('');
  const [selectedTeam, setSelectedTeam] = useState('');
  const [modalVisible, setModalVisible] = useState(false);

  // 接收孙组件传来的下拉选中值
  const handleTeamSelect = (team: string) => {
    setSelectedTeam(team);
  };

  // 点击SAVE时触发父组件回调，传递汇总数据
  const handleSave = () => {
    onSave({ playerName, awayTeam: selectedTeam });
    setModalVisible(false);
  };

  return (
    <View>
      <Button title="添加球员" onPress={() => setModalVisible(true)} />
      <Modal visible={modalVisible}>
        <View>
          <TextInput
            placeholder="球员姓名"
            value={playerName}
            onChangeText={setPlayerName}
          />
          {/* 将回调传给孙组件，用于接收下拉选择值 */}
          <AwayTeamInfo onTeamSelect={handleTeamSelect} />
          <Button title="SAVE" onPress={handleSave} />
          <Button title="取消" onPress={() => setModalVisible(false)} />
        </View>
      </Modal>
    </View>
  );
};

export default AddPlayer;

3. 孙组件（AwayTeamInfo.tsx）：传递下拉选择值给子组件 #

孙组件仅需在用户选择下拉选项时，通过接收的回调函数将选中值传递给子组件。

import React from 'react';
import { View, Picker } from 'react-native';

interface AwayTeamInfoProps {
  onTeamSelect: (team: string) => void;
}

const AwayTeamInfo: React.FC<AwayTeamInfoProps> = ({ onTeamSelect }) => {
  return (
    <View>
      <Picker
        selectedValue=""
        onValueChange={(itemValue) => onTeamSelect(itemValue)}
      >
        <Picker.Item label="选择球队" value="" />
        <Picker.Item label="球队A" value="teamA" />
        <Picker.Item label="球队B" value="teamB" />
        <Picker.Item label="球队C" value="teamC" />
      </Picker>
    </View>
  );
};

export default AwayTeamInfo;

核心逻辑说明 #

• 数据通过回调函数逐层向上传递：孙组件→子组件→父组件，每一层仅负责传递回调和管理自身对应的状态。
• 若后续组件层级更深或数据传递更复杂，可考虑使用React Context或Redux简化状态管理，但逐层传递props是新手最易上手的基础方案。

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