React.forwardRef вызывает ошибку со стилизованным компонентом - PullRequest
Новая
       36

React.forwardRef вызывает ошибку со стилизованным компонентом

0 голосов
/ 23 октября 2018

В настоящее время я использую React 16.3.1 и Styled Components 3.2.5 и сталкиваюсь с проблемой, пытающейся использовать React.forwardRef.

У меня есть компонент Input, который состоит из div-обертки, который содержитметка и поле ввода.Тем не менее, я хочу иметь возможность пересылать ссылку непосредственно в поле ввода, и мне не нужно проходить к ней через первичный div-пакет. 

const Input = React.forwardRef((props, ref) => (
  <Wrapper>
    <Label htmlFor={props.id} required={props.required}>
      {props.label}
    </Label>

    <InputField
      id={props.id}
      ...
    />
  </Wrapper>
));

Это упрощенная версия моего компонента.Однако это приводит к следующей ошибке: 

Uncaught Error: Cannot create styled-component for component: [object Object]

Может быть, обновление Styled Components до v4 поможет?Но есть ли какое-либо решение до обновления, которое я еще не нашел?

Спасибо.

Ответы [ 2 ]

0 голосов
/ 23 октября 2018

Как объяснено в связанной проблеме , существует блокировка React Redux проблема , которая, как ожидается, будет закрыта с этим PR .

AОбходной путь - использовать подход, который использовался до React 16.3 forwardRef, и использовать собственную опору вместо ref для пересылки ссылок: 

const Input = ({forwardRef, ...props}) => (
  <Wrapper>
    <Label htmlFor={props.id} required={props.required}>
      {props.label}
    </Label>

    <InputField
      ref={forwardRef}
      id={props.id}
      ...
    />
  </Wrapper>
));
0 голосов
/ 23 октября 2018

Почему <Wrapper {...rest}>?

Я считаю, что передача ref в Wrapper - правильный путь: 

<Wrapper ref={ref}>
...