Question

我有一个演示here

我在React应用程序中使用样式化组件。

我想用类似于BEM的结构来命名。

我正在使用文章中的示例-https://tech.decisiv.com/structuring-our-styled-components-part-i-2bf21fa64b28

我也想使用打字稿，这是我遇到错误的地方

我的演示正常，但我的错误与实际应用相同，但该应用无法加载。

错误出现在App.tsx <Card.header>Header</Card.header>

中

JSX element type 'Card.header' does not have any construct or call signatures.ts(2604)

并在card.tsx Card.header = Header;

中

Type 'StyledComponent<"h1", any, {}, never>' is not assignable to type 'never'.ts(2322)

我已经研究了这些错误，但是找不到解决方法。

有人知道我如何能够解决这些错误。

Answer 1

在Card中分配另一个元素时，您已经用Card创建了StyledComponent。

您可以通过以下方式修改代码，

        import styled from "styled-components";

        import Header from "./header";

        const Card: any = styled.div`
           border: 10px solid green;
           padding: 10px;
        `;

        Card.header = Header;

        export default Card;

有关更多详细信息，请检查此link和demo here。

在TypeScript中创建接口的其他方法可用于定义类型。

请参见以下代码，

        import styled, { StyledComponentBase } from "styled-components";
        import Header from "./header";

        interface ICard extends StyledComponentBase<any, {}> {
           header?: any;
        }

        const Card: ICard = styled.div`
            border: 10px solid green;
            padding: 10px;
        `;

        Card.header = Header;

        export default Card;

请查看示例here的演示。

希望这会对您有所帮助。

React，样式化组件，打字稿错误

1 个答案: