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

Question

Я использую 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 поможет? Но есть ли какое-то решение до обновления, которое я еще не нашел?

Спасибо.

Answer 1

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

Обходной путь должен использовать подход, который использовался до Реакта 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>
));

Answer 2

Зачем <Wrapper {...rest}>?

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

<Wrapper ref={ref}>