为什么不能导出 PureComponent答案

【问题标题】：Why cannot export a PureComponent为什么不能导出 PureComponent
【发布时间】：2020-03-10 16:03:21
【问题描述】：

我有它的工作：

export class FormAuto extends React.PureComponent {
   constructor(props) {
     ...
   }
  ....
}

我这样导入组件：import { FormAuto } from './FormAuto'

但我想这样做，使用来自 redux 的connect：

class FormAuto extends React.PureComponent {
   constructor(props) {
     ...
   }
  ....
}
export default connect(mapStateToProps, mapDispatchToProps)(FormAuto);

但我有这个错误：

模块 ../../FormAuto 没有导出的成员 'FormAuto'

如果我像这样导入组件：import FormAuto from './FormAuto' 该组件不再显示。

你能帮帮我吗？

【问题讨论】：

你是如何导入组件的
我认为这取决于您导入组件的方式，对于第二次导入，您不应将其包裹在花括号中：import FormAuto from "your/path";
“组件不再显示”有错误吗？
根据您的地图状态到道具，您不需要纯组件。如果地图状态类似于mapStateToProps=state({prop:{new:reference}})，它将为每个渲染的道具创建一个新的引用，并且纯组件将无法看到没有任何变化。如果你想获得最好的结果，你可以考虑重新选择，这也会阻止你重复逻辑，例如mapStateToProps=state=>{a:state.a}你可以在多个地图状态函数中重复state.a。或者，如果您计算值，您可以在地图状态函数中重复它们。

标签： reactjs components

【解决方案1】：

该问题与PureComponent 无关。这是因为您从 named 导出更改为 default 导出。

你有两个选择。

使用默认导入

import FormAuto from './path/to/FormAuto'

执行命名导出：

// Either the const or the class will need to be renamed in this scenario
export const FormAuto = connect(mapStateToProps, mapDispatchToProps)(FormAuto);

底线是您需要保持它们的一致性。

供参考：

默认

export default MyComponent

// The import name can be anything you choose. 
// For clarity it may be preferred to use the component name
import MyComponent from './MyComponent';

命名

export MyComponent

import { MyComponent } from './MyComponent';

【讨论】：

我在出口上有这个：[eslint] 'FormAuto' 已经定义了。（不重新声明）
啊，你是对的，我错了。您将需要重命名导出的 const 或类。他们不能同名。