在样式化的组件中引用另一个组件时,我收到此错误
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);
`;
最佳答案
看起来这里的问题是存在循环依赖; 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>
);
}
关于javascript - 样式化组件引用错误 : Cannot access 'Component' before initialization,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68108532/