javascript - 样式化组件引用错误 : Cannot access 'Component' before initialization

Question

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

ReferenceError: Cannot access 'SiteHeader' before initialization

这是代码

//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 问题，而不是样式组件问题。
此问题的解决方案是确保导入仅在 1 个方向上进行。最简单的方法是移动 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>
    );
}