bingumd
@bingumd

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

Есть такой компонент:
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} />
})
...
  • Вопрос задан
  • 96 просмотров
Решения вопроса 1
  1. Прочитать сообщение.
  2. Перевести его.
  3. Сделать компонент Box на основе класса, а не функции.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
22 окт. 2020, в 06:46
3000 руб./за проект
21 окт. 2020, в 22:40
300 руб./за проект
21 окт. 2020, в 22:34
25000 руб./за проект