样式化组件参考错误：初始化前无法访问“组件”

Question

在样式化组件中引用另一个组件时，我收到此错误

ReferenceError: 初始化前无法访问“SiteHeader”

这是代码

//Common.ts

import styled from 'styled-components/macro';
import { SiteHeader } from '../Theme/Layout/Header';

export const Container = styled.div`
    padding: 0 15px;
    ${SiteHeader} & {
        padding-top: 20px;
        padding-bottom: 20px;
    }
`;

//header.tsx

import { Container } from '../../Styles/Common';
import styled from 'styled-components/macro';

export default function Header(): JSX.Element {
    return (
        <SiteHeader>
            <Container>
                {/*navigation*/}
            </Container>
        </SiteHeader>
    );
}

export const SiteHeader = styled.header`
    background: var(--green-kelp);
`;

Answer 1

看起来这里的问题是存在循环依赖；Common.ts正在进口header.tsx，header.tsx正在进口Common.ts。因此，构建工具无法确定应首先解析哪个文件，并且SiteHeader在解析Container. 这是一个 JS 问题，而不是一个样式组件问题。

此问题的解决方案是确保导入仅朝一个方向进行。最简单的方法是移动SiteHeader到它自己的文件中：

SiteHeader.js：

const SiteHeader = styled.header`
    background: var(--green-kelp);
`;

export default SiteHeader

常见的：

import { SiteHeader } from './SiteHeader';

export const Container = styled.div`
    padding: 0 15px;
    ${SiteHeader} & {
        padding-top: 20px;
        padding-bottom: 20px;
    }
`;

标题：

import styled from 'styled-components/macro';

import SiteHeader from '../SiteHeader';
import { Container } from '../../Styles/Common';

export default function Header(): JSX.Element {
    return (
        <SiteHeader>
            <Container>
                {/*navigation*/}
            </Container>
        </SiteHeader>
    );
}