Question

我目前正在运行React 16.3.1和样式化组件3.2.5，并遇到尝试使用React.forwardRef的问题。

我有一个Input组件，该组件由包装div组成，该div容纳标签和输入字段。但是，我希望能够将ref直接转发到输入字段，而不必通过主包装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>
));

Answer 2

为什么要<Wrapper {...rest}>？

我将ref传递给包装器是正确的方法：

<Wrapper ref={ref}>

React.forwardRef导致样式组件发生错误

2 个答案: