javascript - React.forwardRef 导致样式组件错误

Question

我当前正在运行 React 16.3.1 和 Styled Components 3.2.5，并且在尝试使用 React.forwardRef 时遇到问题。

我有一个输入组件，它由一个包含标签和输入字段的包装 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]

也许将样式组件升级到 v4 会有帮助？但是升级前有没有我还没有找到的解决方案？

谢谢。

Answer 1

如 related issue 中所述，有阻塞React Redux issue预计将通过 this PR 关闭.

解决方法是使用 React 16.3 forwardRef 之前使用的方法，并使用自定义 prop 而不是 ref 来转发引用:

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

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