React - 无法从 index.js 导出多个文件

Question

我正在使用 Atomic Design 创建样式组件，我想将样式文件分离到一个文件夹中，并有一个 index.js 来导出所有文件。我发现可以这样做：但在我的情况下，当我想在 index.js

中导出文件时

export StyledClosestMeet from 'styledComponents/StyledClosestMeet.js';

我有错误

Declaration or statement expected.ts(1128)

在 styledComponents 文件夹中我有第二个文件：

import styled from 'styled-components';
import variables from 'settings/variables';

const StyledClosestMeet = styled.div`
  color: ${variables.colorMain};
  font-size: 2rem;
  font-weight: bold;
  text-transform: uppercase;
`;

稍后我想将该文件导入到 Atom 文件中：

import React from 'react';
import {StyledClosestMeet} from 'styledComponents/StyledClosestMeet';

const ClosestMeet = () => {
  return <StyledClosestMeet>Najbliższe spotkanie</StyledClosestMeet>;
};

export default ClosestMeet;

我正在使用 jsconfig "baseUrl": "./src"

Answer 1

您必须导出 StyledClosestMeet

import styled from 'styled-components';
import variables from 'settings/variables';

const StyledClosestMeet = styled.div`
  color: ${variables.colorMain};
  font-size: 2rem;
  font-weight: bold;
  text-transform: uppercase;
`;

export { StyledClosestMeet }

您可以像下面这样导出 StyledClosestMeet。

export { StyledClosestMeet } from 'styledComponents/StyledClosestMeet.js';

Answer 2

您可以创建一个 index.js 文件来导出两个文件，如下所示：

export { default as Styled1 } from "./styled1";
export { default as Styled2 } from "./styled2";

然后像这样导入它们：

import { Styled1, Styled2 } from "./styled/index";

看看这个 example

React - 无法从 index.js 导出多个文件

React - cannot export multiple files from index.js

javascript

reactjs

styled-components