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

【问题标题】：React - cannot export multiple files from index.jsReact - 无法从 index.js 导出多个文件
【发布时间】：2020-04-17 08:44:47
【问题描述】：

我正在使用 Atomic Design 创建样式化组件，我想将样式化文件分离到一个文件夹中，并使用一个 index.js 来导出所有文件。我发现可以这样完成：Splitting Styled-Components into multiple files but export them as one file 但就我而言，当我想在index.js 中导出文件时

export StyledClosestMeet from 'styledComponents/StyledClosestMeet.js';

我有错误

预期的声明或声明.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"

【问题讨论】：

好的，我发现问题：babeljs.io/docs/en/babel-plugin-proposal-export-default-from

标签： javascript reactjs styled-components

【解决方案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';

【讨论】：

【解决方案2】：

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

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

然后像这样导入它们：

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

看看这个example

【讨论】：