React native 如何在react native中管理父级和子级之间的多个引用？

我能够管理父母和第一个孩子之间的1个参考，但每当我尝试这样做时，我都无法做到

在我的例子中，我有主父类和9个子类，我需要将所有9个类中的数据提取到父类中

这是我的父类：在这里我传递对子类的引用

<View style={styles.bodyContainer}>
   {pageIndex === 1 && <Step1 ref={this.child} />}
   {pageIndex === 2 && <Step2 ref={this.child} />}
   {pageIndex === 3 && <Step3 ref={this.child} />}
   {pageIndex === 4 && <Step4 ref={this.child} />}
   {pageIndex === 5 && <Step5 ref={this.child} />}
   {pageIndex === 6 && <Step6 ref={this.child} />}
   {pageIndex === 7 && <Step7 ref={this.child} />}
   {pageIndex === 8 && <Step8 ref={this.child} />}
   {pageIndex === 9 && <Step9 ref={this.child} />}
</View>

如下所示，我成功地将数据从子类传递到父类：

  saveStep1Data = () => {
    const {
      EDFLAG_NeckPainTenderness,
      REDFLAG_DoubleVision,
      REDFLAG_TinglingBurning,
      REDFLAG_Headache,
      REDFLAG_SeizureConvulsion,
      REDFLAG_LossConsciousness,
      REDFLAG_DeterioratingConciousState,
      REDFLAG_Vomiting,
      REDFLAG_RestlessAgitationCombative,
    } = this.state;

    const obj = [
      EDFLAG_NeckPainTenderness,
      REDFLAG_DoubleVision,
      REDFLAG_TinglingBurning,
      REDFLAG_Headache,
      REDFLAG_SeizureConvulsion,
      REDFLAG_LossConsciousness,
      REDFLAG_DeterioratingConciousState,
      REDFLAG_Vomiting,
      REDFLAG_RestlessAgitationCombative,
    ];

    return obj;
  };

我正在触发获取子类数据的操作，如下所示：

        <Text
          style={styles.saveText}
          onPress={() => {
            const step1Data = this.child.current.saveStep1Data();
            console.log(step1Data);
          }}>
          save
        </Text>

{
const step1Data=this.child.current.saveStep1Data（）；
console.log（step1Data）；
}}>
拯救

---

所有只有一个子类的东西对我来说都很好，但是我没有得到多个子类的多个引用所期望的结果。

您需要为每个子类创建多个引用，并将其作为道具传递给子类

constructor(props) {
    super(props);
    this.child1 = React.createRef();
    this.child2 = React.createRef();
    this.child3 = React.createRef();
    this.child4 = React.createRef();
      ... // so on
 
  }

您需要将不同的引用作为道具传递给孩子

<View style={styles.bodyContainer}>
   {pageIndex === 1 && <Step1 ref={this.child1} />}
   {pageIndex === 2 && <Step2 ref={this.child2} />}
   {pageIndex === 3 && <Step3 ref={this.child3} />}
   {pageIndex === 4 && <Step4 ref={this.child4} />}
   ...// So on
</View> 

{pageIndex==1&&}
{pageIndex==2&&}
{pageIndex==3&&}
{pageIndex==4&&}
…等等

您还需要更改函数

 <Text
    style={styles.saveText}
    onPress={() => {
        const step1Data = this.child1.current.saveStep1Data();
        const step2Data = this.child2.current.saveStep1Data();
        ...// so On
        console.log(step1Data);
        console.log(step2Data);
    }}>
        save
 </Text>

{
const step1Data=this.child1.current.saveStep1Data（）；
const step2Data=this.child2.current.saveStep1Data（）；
…等等
console.log（step1Data）；
console.log（step2Data）；
}}>
拯救

在上述情况下，我发现数据呈现存在一个主要问题， 我在根方法中有条件地呈现所有组件（步骤1到步骤9）， 应用程序仅初始化Step1的引用，因为我们有条件地管理所有组件。应用程序将根据条件仅渲染一个组件

---

解决方案：我们必须在一个根文件中编写所有组件的代码，才能完成我在问题中所述的工作

谢谢@rashi，但当尝试像您所说的那样管理时，我没有得到预期的结果，而且这次我甚至没有得到step1Data

 <Text
    style={styles.saveText}
    onPress={() => {
        const step1Data = this.child1.current.saveStep1Data();
        const step2Data = this.child2.current.saveStep1Data();
        ...// so On
        console.log(step1Data);
        console.log(step2Data);
    }}>
        save
 </Text>