React类组件复用问题：如何复用SummaryList组件？

核心结论 #

同一组件完全可以在应用中多次导入使用，不存在限制。你遇到的问题是导出/导入的写法有误，调整后即可实现SummaryList的复用。

正确的导出方式 #

针对你的代码，有两种可靠的导出方式：

方式1：定义时直接命名导出SummaryList #

修改组件定义代码，给SummaryList加上export关键字：

export class SummaryList extends React.Component {
    // SummaryList的组件逻辑
}

class Summary extends React.Component {
    render() {
        return (
            <Switch>
                <Route path="/apply" component={Advance} />
                <Route path="/summary/edit/:id" component={EAdvance} />
                <Route path="/summary" component={SummaryList} />
            </Switch>
        );
    }
}

export default Summary;

方式2：文件末尾同时导出默认和命名组件 #

如果不想修改组件定义，也可以在文件末尾同时导出两个组件：

class SummaryList extends React.Component {
    // SummaryList的组件逻辑
}

class Summary extends React.Component {
    render() {
        return (
            <Switch>
                <Route path="/apply" component={Advance} />
                <Route path="/summary/edit/:id" component={EAdvance} />
                <Route path="/summary" component={SummaryList} />
            </Switch>
        );
    }
}

export { SummaryList };
export default Summary;

对应的导入方式 #

在需要使用的文件中，按以下方式导入：

• 导入Summary（默认导出）：

  import Summary from './你的组件文件路径';
  

• 导入SummaryList（命名导出）：

  import { SummaryList } from './你的组件文件路径';
  

排查常见错误点 #

如果还是无效，检查以下几点：

• 确认导入时的文件路径完全正确，相对路径或绝对路径都要匹配
• 确认组件名称大小写完全一致（React对组件名称大小写敏感）
• 检查SummaryList组件内部是否存在语法错误，导致组件无法正常导出

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