React动态组件Ref.current始终为null问题求助

你遇到的问题核心在于Ref的赋值时机——React只有在组件完成挂载（或更新）后，才会将组件实例赋值给ref.current。而你在constructor里就提前创建所有Quiz组件并存入quizzes数组，这时候组件还未开始渲染，Ref自然还没被React赋值，所以调用setQuizPage时current始终是null。另外你在addQuiz中使用this.state.currentPage初始化Quiz的pagerFocusIndex，后续currentPage更新时，quizzes数组不会重新生成，也会导致属性无法同步更新。

下面给出两种针对性的解决方案：

方案一：在Render中动态生成Quiz组件 #

把Quiz组件的生成逻辑移到渲染阶段，确保每次组件渲染时正确关联Ref，同时保证Props同步更新：

export default class QuizViewPager extends React.Component<QuizViewPagerProps, QuizViewPagerState> {
  quizDeck: Deck | undefined;
  quizRefMap: Map<number, React.RefObject<Quiz>>;
  viewPager: React.RefObject<ViewPager>;

  constructor(props: QuizViewPagerProps) {
    super(props);
    this.quizRefMap = new Map<number, React.RefObject<Quiz>>();
    this.viewPager = React.createRef<ViewPager>();
    this.state = {
      currentPage: 0,
    };
    // 提前初始化所有Ref，避免每次Render创建新Ref，保证Ref稳定性
    const itemCount = this.quizDeck?.litems.length || 0;
    for (let i = 0; i < itemCount; i++) {
      this.quizRefMap.set(i, React.createRef<Quiz>());
    }
  }

  setQuizPage = (page: number) => {
    this.viewPager.current?.setPage(page);
    this.setState({ currentPage: page }, () => {
      // 放在setState回调中，确保State更新完成、组件重新渲染后再访问Ref
      this.quizRefMap.get(page)?.current?.focusInput();
    });
  }

  renderQuizzes = () => {
    const { currentPage } = this.state;
    const items = this.quizDeck?.litems || [];
    return items.map((entry, page) => {
      const ref = this.quizRefMap.get(page)!;
      return (
        <Quiz
          key={page}
          litem={entry}
          index={page}
          ref={ref}
          pagerFocusIndex={currentPage}
          pagerLength={items.length}
          setQuizPage={this.setQuizPage}
          navigation={this.props.navigation}
          quizType={this.props.route.params.quizType}
          quizManager={this.props.route.params.quizType === EQuizType.Lesson ? GlobalVars.lessonQuizManager : GlobalVars.reviewQuizManager}
        />
      );
    });
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <ViewPager
          style={styles.viewPager}
          initialPage={0}
          ref={this.viewPager}
          scrollEnabled={false}
        >
          {this.renderQuizzes()}
        </ViewPager>
      </View>
    );
  }
};

关键修改说明 #

1. 提前初始化Ref：在constructor中一次性创建所有需要的Ref并存入quizRefMap，避免每次Render生成新Ref，保证Ref的稳定性。
2. 动态渲染组件：将Quiz组件的生成逻辑移到renderQuizzes方法中，在Render阶段动态生成，确保React在组件挂载/更新时正确为Ref赋值。
3. State更新回调：把调用focusInput的逻辑放在setState的回调里，确保State更新完成、组件重新渲染后再访问Ref，此时current已存在有效实例。

方案二：使用回调Ref（更灵活的方式） #

如果方案一仍有问题，可以尝试回调Ref，它能更精准地控制Ref的赋值时机：

export default class QuizViewPager extends React.Component<QuizViewPagerProps, QuizViewPagerState> {
  quizDeck: Deck | undefined;
  quizRefMap: Map<number, Quiz | null>; // 直接存储组件实例，无需RefObject
  viewPager: React.RefObject<ViewPager>;

  constructor(props: QuizViewPagerProps) {
    super(props);
    this.quizRefMap = new Map<number, Quiz | null>();
    this.viewPager = React.createRef<ViewPager>();
    this.state = {
      currentPage: 0,
    };
  }

  setQuizPage = (page: number) => {
    this.viewPager.current?.setPage(page);
    this.setState({ currentPage: page }, () => {
      this.quizRefMap.get(page)?.focusInput();
    });
  }

  // 回调Ref函数，接收页面索引，返回赋值函数
  saveQuizRef = (page: number) => (instance: Quiz | null) => {
    this.quizRefMap.set(page, instance);
  }

  renderQuizzes = () => {
    const { currentPage } = this.state;
    const items = this.quizDeck?.litems || [];
    return items.map((entry, page) => (
      <Quiz
        key={page}
        litem={entry}
        index={page}
        ref={this.saveQuizRef(page)} // 使用回调Ref
        pagerFocusIndex={currentPage}
        pagerLength={items.length}
        setQuizPage={this.setQuizPage}
        navigation={this.props.navigation}
        quizType={this.props.route.params.quizType}
        quizManager={this.props.route.params.quizType === EQuizType.Lesson ? GlobalVars.lessonQuizManager : GlobalVars.reviewQuizManager}
      />
    ));
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <ViewPager
          style={styles.viewPager}
          initialPage={0}
          ref={this.viewPager}
          scrollEnabled={false}
        >
          {this.renderQuizzes()}
        </ViewPager>
      </View>
    );
  }
};

回调Ref的优势 #

• 无需创建RefObject，直接存储组件实例，逻辑更简洁。
• 能明确控制Ref的赋值和清除时机（组件卸载时，React会调用回调并传入null）。

额外注意点 #

如果Quiz是函数组件，需要用React.forwardRef包裹它，并通过useImperativeHandle暴露需要调用的方法，否则父组件无法通过Ref获取到组件实例：

const Quiz = React.forwardRef<Quiz, QuizProps>((props, ref) => {
  // 假设内部有一个input元素需要聚焦
  const inputRef = React.useRef<HTMLInputElement>(null);

  // 暴露给父组件的方法
  React.useImperativeHandle(ref, () => ({
    focusInput: () => {
      inputRef.current?.focus();
    }
  }));

  return <input ref={inputRef} />;
});

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