React导出多个类组件时出现标识符重复声明错误，如何解决？

嘿，我来帮你理顺这个问题！你遇到的「Identifier 'compA' has already been declared」错误原因很明确：你先从./App.js导入了compA和compB，紧接着又在当前文件里声明了同名的类——同一个作用域里绝对不能有两个同名的标识符，这就触发了语法错误。

正确的多组件导出方式 #

首先要明确：如果这两个组件是你在当前文件里编写的，那完全不需要从./App.js导入它们。下面给你两种常用的正确写法：

方式1：命名导出（推荐）

这种方式更灵活，支持按需导入，也是React社区的常用做法：

import styles from './ViewJobsList.css';
import { Helmet } from 'react-helmet';
import React from 'react'; // 别忘了导入React，类组件依赖它

// 注意：React组件名首字母要大写，这是官方约定（避免被当成普通HTML标签）
class CompA extends React.Component {
  // 你的组件逻辑代码...
};

class CompB extends React.Component {
  // 你的组件逻辑代码...
};

// 直接命名导出每个组件
export { CompA, CompB };

在需要使用这些组件的页面里，你可以这样导入并渲染：

import { CompA, CompB } from './ViewJobsList';

function CombinedPage() {
  return (
    <div className={styles.container}>
      <Helmet>
        <title>整合组件页面</title>
      </Helmet>
      <CompA />
      <CompB />
    </div>
  );
}

export default CombinedPage;

方式2：默认导出组件对象（不推荐，但可选）

如果你一定要用默认导出，可以把多个组件打包成一个对象导出，但使用时需要额外解构或点访问：

import styles from './ViewJobsList.css';
import { Helmet } from 'react-helmet';
import React from 'react';

class CompA extends React.Component {...};
class CompB extends React.Component {...};

// 默认导出包含所有组件的对象
export default { CompA, CompB };

导入使用的方式：

import JobComponents from './ViewJobsList';

function CombinedPage() {
  return (
    <div>
      <JobComponents.CompA />
      <JobComponents.CompB />
    </div>
  );
}

未来添加新组件的方法 #

如果用命名导出，添加新组件超简单：

1. 在当前文件里声明新的类组件（比如CompC）
2. 把它加到导出的大括号里：

class CompC extends React.Component {
  // 新组件逻辑...
};

// 更新导出列表
export { CompA, CompB, CompC };

之后在页面里按需导入CompC即可。

如果用默认导出对象，就把新组件加到导出的对象里：

export default { CompA, CompB, CompC };

使用时同样通过JobComponents.CompC访问。

最后再提个小细节：组件名首字母大写是React的强制约定哦，小写的组件名会被React识别为原生HTML标签，大概率会导致渲染错误，所以记得把compA改成CompA这类大写开头的命名~

内容的提问来源于stack exchange，提问作者OBre_1_1