6

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

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);
`;
4

2 回答 2

2

看起来这里的问题是存在循环依赖；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>
    );
}
于 2021-09-11T14:31:41.470 回答
-1

当您尝试设置在其父组件之后定义的子组件时，会出现此错误。

于 2021-06-24T02:41:19.117 回答