javascript - 如何在React中使用forwardRef输入多个引用？

Question

我有父组件，我在其中定义了一些引用。然后我创建一个包含所有这些引用的对象。然后将此对象传递给子组件的 ref。

父组件只是一个页面组件，子组件是该页面上的部分。在子组件内部，我有按钮，通过单击该按钮，我滚动到下一部分。

const Home: React.FC = () => {
  const effectiveCoursesRef = useRef(null);
  const reviewsRef = useRef(null);
  const howWorksRef = useRef(null);
  const scienceBehindRef = useRef(null);
  const FAQRef = useRef(null);

  const refObject = {
    effectiveCoursesRef,
    reviewsRef,
    howWorksRef,
    scienceBehindRef,
    FAQRef,
  };
  
  return (
    <MainLayout
    >
      <main>
        <EffectiveCourses ref={refObject} />
        <Reviews ref={refObject} />
        <HowSleepSchoolWork ref={refObject} />
        <ScienceBehind ref={refObject} />
        <FAQ ref={refObject} />
      </main>
    </MainLayout>
  );
};

export default Home;

在子组件中，我在forwardRef中获取引用

const ScienceBehind = forwardRef((_, ref: any) => (
  <section className={`${styles.section}`} ref={ref.scienceBehindRef}>
    <div className="container">
      <h2 className={styles.sectionTitle}>Science behind Sleep School</h2>
      <ArrowButton ref={ref.FAQRef} color="#082B4B" />
    </div>
  </section>
));

export default ScienceBehind;

这种方法工作正常，但我有 typescript 错误。请帮助我弄清楚如何输入此代码并解决错误。或者更好的方法来实现相同的目标。

任何帮助appriced! 问候，安娜。

我已经尝试输入它，但仍然有错误。

Answer 1

不久前，我也遇到了与您类似的问题，这对我来说很有效。虽然我不确定这是否也适合您，但您可以尝试在定义引用时添加类型。

const scienceBehindRef = useRef<ScienceBehindRefType>(null);

编辑 23-08-31

抱歉，我试图重新创建您的问题，基本上发生的情况是，当您用 forwardRef 包装 ScienceBehind 时，它需要一个 ref 在引用键中

在您的情况下，您正在传递一个包含引用的对象

<ScienceBehind
  ref={refObject} // expects a ref
/>

如果你想在组件中传递多个引用，我建议你应该这样做

<ScienceBehind
  ref={refObject.scienceBehindRef} // or just pass scienceBehindRef directly
  otherRefs={refObject}
/>