Использование ссылки для получения размера функционального компонента реакции

Question

Я использую React 16.8, у меня есть функциональный компонент, который мне нужен для измерения высоты (чтобы я мог знать, сколько детей отображать в вертикальном пространстве), похоже, что лучший способ сделать это с помощью ссылок , но все, что я пытался сделать до сих пор, приводит к одному и тому же предупреждению: Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?.

Я попробовал следующие примеры в Интернете, чтобы использовать .forwardRef, но я не должен правильно его настраивать. Любая помощь приветствуется.

Вот соответствующий код:

import React, { useState, useEffect, useRef } from 'react'

const ForwardingStyledDayGrid = React.forwardRef((props, ref) => (
  <StyledDayGrid ref={ref}>{props.children}</StyledDayGrid>
))

function DayGrid(props) {

  const [height, setHeight] = useState(0)

  const dayGridRef = useRef(null)

  useEffect(() => {
    setHeight(dayGridRef.current.clientHeight)
  })

  return (
    <ForwardingStyledDayGrid
      ref={dayGridRef}
      inCurrentMonth={props.inCurrentMonth}

    >
      {children}
    </ForwardingStyledDayGrid>
  )
}

export default DayGrid

и вот StyledDayGrid:

import React from 'react'
import styled from 'styled-components'
import withTheme from '@material-ui/core/styles/withTheme'

import Grid from '@material-ui/core/Grid'

const StyledDayGrid = withTheme(styled(({ inCurrentMonth, ...rest }) => (
  <Grid {...rest} />
))`
  && {
    overflow: hidden;
    padding: 2px;
    background-color: ${props =>
      !props.inCurrentMonth && props.theme.monthView.nonCurrentMonth};
    etc.....
  }
`)

Answer 1

В соответствии с предупреждением, как описано в документах , функциональные компоненты не поддерживают атрибут ref, поскольку у них нет экземпляров, подобных компонентам класса.

Вы находятся на правильном пути с forwardRef, однако его необходимо использовать непосредственно с функциональным компонентом, в данном случае StyledDayGrid например

const StyledDayGrid = React.forwardRef((props, ref) => {
  // use 'ref' internally
  return (...);
});

function DayGrid(props) {

  const dayGridRef = useRef(null)
  ...
  return (
    <StyledDayGrid ref={dayGridRef}>
      {children}
    </StyledDayGrid>
  )
}