Question

我正在跟踪样式化组件中的文档如何解释在以下库的v4中使用refs：https://www.styled-components.com/docs/advanced#refs

但是，这实际上似乎不起作用。 ref属性抱怨在样式组件上仅创建React.RefObject并将其设置为ref时使用了错误的类型。

这是我到目前为止所做的：

const _Wrapper = styled.div`
position: relative;
height: 100%;
overflow: auto;
padding: 0px 48px;`;

然后我创建了一个refObject并将其初始化为我的构造器：

this.flyoutRef = React.createRef();

现在，将其设置为样式化组件上的ref时，它将无法启动并且还会显示错误：

<_Wrapper ref={this.flyoutRef} >{children}</_Wrapper>

从TS显示的错误是这样的：

根据样式化组件中的文档，我正在实现它的显示方式。如各种示例所示，我什至尝试使用forwardRef，但错误仍然相同。

这是我如何使用forwardRef构建样式组件的方法：

const Div = ({ innerRef, ...props}: any) => <div innerRef={innerRef} {...props} />;

const Forwarded = React.forwardRef((props, ref) => (
    <Div {...props} innerRef={ref} />
));

const _Wrapper = styled(Forwarded)`
    position: relative;
    height: 100%;
    overflow: auto;
    padding: 0px 48px;
`;

而且我仍然像以前一样使用它：

<_Wrapper ref={this.flyoutRef} >{children}</_Wrapper>

现在显示此错误：

Type 'Ref<HTMLElement>' is not assignable to type '(string & ((instance: {} | null) => void)) | (string & RefObject<{}>) | (((instance: Component<ThemedOuterStyledProps<WithOptionalTheme<RefAttributes<{}>, any>, any>, any, any> | null) => void) & ((instance: {} | null) => void)) | ... 4 more ... | undefined'.

那么来自样式组件的文档是否错误？还是我缺少需要转发的内容？非常感谢您澄清此处的情况，在此先感谢您的帮助。

版本：

样式化的组件：4.1.3

反应：16.8.3

样式化的组件v4 refObject

0 个答案: