Как исправить ошибку 'Function components cannot be given refs'?

Question

[bingumd]

Есть такой компонент:

import PropTypes from 'prop-types'
import styled from 'styled-components'
import { flexbox } from 'styled-system'

const BoxElement = styled.div`
    ${flexbox};
`

const Box = ({ children, ...props }) => <BoxElement {...props}>{children}</BoxElement>

Box.propTypes = {
    as: PropTypes.oneOf(['div', 'section']),
}

Box.defaultProps = {
    as: 'div',
}

export default Box

И использую его в другом компоненте:

import React, { useRef } from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import Box from './Box'

export const HeroWrap = styled(Box)`
    position: relative;
`

const Hero = ({ children, ...props }) => {
    const elRef = useRef(null)
    
    return (
        <HeroWrap ref={elRef} {...props}>
            {children}
        </HeroWrap>
    )
}

Hero.propTypes = {
    children: PropTypes.node.isRequired,
}

Hero.defaultProps = {
    as: 'section',
}

export default Hero

И получаю ошибку:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Как можно исправить?

UPD
Проблема решена. Для того чтобы использовать рефы в функциональном компонетне, надо создать его так:

...
const Box = React.forwardRef((props, ref) => {
    return <BoxElement {...props} ref={ref} />
})
...

Answer 1

[Алексей Уколов]

1. Прочитать сообщение.
   
2. Перевести его.
   
3. Сделать компонент Box на основе класса, а не функции.
   

Comments

[ParaBellum577]

если прочесть и перевести, то будет понятно, что там не нужен класс, там нужен React.forwardRef и все)