React.forwardRef 导致样式化组件出错
React.forwardRef Causes Error with Styled Component
我目前是 运行 React 16.3.1 和 Styled Components 3.2.5,我在尝试使用 React.forwardRef.
时遇到问题
我有一个输入组件,它由一个包含标签和输入字段的包装器 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]
也许将 Styled Components 升级到 v4 会有帮助?但是在升级之前有什么解决方法我还没有找到吗?
谢谢。
为什么 <Wrapper {...rest}>
?
我认为将 ref 传递给 Wrapper 是正确的方法:
<Wrapper ref={ref}>
如 related issue, there is blocking React Redux issue that is expected to be closed with 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>
));
我目前是 运行 React 16.3.1 和 Styled Components 3.2.5,我在尝试使用 React.forwardRef.
时遇到问题我有一个输入组件,它由一个包含标签和输入字段的包装器 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]
也许将 Styled Components 升级到 v4 会有帮助?但是在升级之前有什么解决方法我还没有找到吗?
谢谢。
为什么 <Wrapper {...rest}>
?
我认为将 ref 传递给 Wrapper 是正确的方法:
<Wrapper ref={ref}>
如 related issue, there is blocking React Redux issue that is expected to be closed with 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>
));