1

我正在关注 styled-components 中的文档如何解释refs在库的 v4 中使用：https ://www.styled-components.com/docs/advanced#refs

但是，这实际上似乎不起作用。ref prop 抱怨在创建 aReact.RefObject并将其设置为refstyled-component 时使用了错误的类型。

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

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显示的错误是这样的：

Type 'Ref<HTMLElement>' is not assignable to type 'string | (string & ((instance: HTMLDivElement | null) => void)) | (string & RefObject<HTMLDivElement>) | (((instance: Component<ThemedOuterStyledProps<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any>, any, any> | null) => void) & string) | ... 6 more ... | undefined'.

根据 styled-components 的文档，我正在实现它的显示方式。我什至尝试使用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

4

0 回答 0