相关疑难解决方法(0)

我正在尝试创建一个导航栏，当用户单击其中一个链接时，页面会滚动到某个部分。在上面的代码中，每个元素都是我页面的一部分：

    <Navbar scrollFunc={scrollToRef} />      
    <Mainlogo ref={mainLogoRef} />
    <Sales  ref={salesRef} />
    <Introduction ref={introductionRef} />
    <Blog ref={blogRef} />
    <Footer />

'refs' 被声明如下，使用 useRef 钩子：

  const mainLogoRef = useRef(null)
  const salesRef = useRef(null)
  const introductionRef = useRef(null)
  const blogRef = useRef(null)

我用来滚动的功能如下：

  const scrollToRef = ref => {
    window.scrollTo({ top: ref.current.offsetTop, behavior: "smooth" })
  }

问题是“当前”键始终未定义。当我做这样的事情时：

<div ref={salesRef}> <Sales  /><div>

或者

<section ref={salesRef}> <Sales  /><section>

一切正常。我假设 'ref' 仅适用于 html 'pure' 标签。有没有办法在自定义组件中使用“useRef”钩子？

免责声明：对不起，英语不好，我不是母语人士。

我正在学习如何在这里使用前向引用，我有一个 FC，我需要在其中初始化所有引用，然后将它们传递给它的子级，以便我可以获得一些 Chartjs 图表的画布实例。然而，使用forwardRef我得到一个类型错误，说ref不是孩子的属性。

const BUIDashboard: React.FC = () => {
    const chartRef = React.createRef<RefObject<HorizontalBar>>()
.
.
.
    return (

      <Child 
          ref={chartRef} <------------------- TYPE ERROR HERE
          isLoading={isLoadingChild}
          data={childData} />
     )
}

孩子没有错误，但它是这样设置的

type Props = {
  rootProps?: DashboardCardProps
  isLoading?: boolean
  data?: BUIMetrics['breachBreakdownByOutcome']
}

const Child: React.FC<Props> = React.forwardRef(({ rootProps, isLoading, data }, ref: RefObject<HorizontalBar>) => {

    return (
      <HorizontalBar ref={ref}/>
    )
}

我是否错误地为孩子定义了参数？

我认为问题可能出在这一行

const Child: React.FC<Props>

所以我将 Props 类型更新为

type Props = {
  rootProps?: DashboardCardProps
  isLoading?: boolean
  data?: BUIMetrics['breachBreakdownByOutcome'] …