React.forwardRef导致Styled Component出错

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会有所帮助？但在升级之前是否有我还没有发现的解决方案呢？

谢谢。

- Yuschick

Answer 1

如相关问题所述，存在阻塞的React Redux问题，预计将通过此PR关闭。

一种解决方法是使用在React 16.3之前使用的方法forwardRef，并使用自定义属性而不是ref来转发refs：

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

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

- Estus Flask

---

非常感谢！由于我的 Styled Components 版本仍然期望 ìnnerRef 而不是 ref，因此我稍微修改了您的答案。 除此之外，我已经成功让它工作了。 - Yuschick

Answer 2

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

我认为将ref传递给Wrapper是正确的方式：

<Wrapper ref={ref}>

- Kenzk447

---

抱歉，那是旧代码的遗留问题，与此无关。但我不想把引用放在包装器上，我需要它放在输入字段上。 - Yuschick