错误：缩小反应错误 #130 [重复]答案

【问题标题】：Error: Minified React error #130 [duplicate]错误：缩小反应错误 #130 [重复]
【发布时间】：2018-10-29 21:35:37
【问题描述】：

我在文件 ./MyInput.react.js 中有以下 ReactJs 组件

import React from 'react';

export default class MyInput extends React.Component {
  constructor(props) {
    super(props);
    this.id = getNextId();

    this.onChange = this.onChange.bind(this);
  }
  onChange(e) {
    this.props.onChange(e.target.value);
  }
  render() {
    return (
      <label htmlFor={this.id}>
        {this.props.label}      
        <input
          id={this.id}
          value={this.props.value} 
          onChange={this.onChange}
          />
      </label>
    );
  }
}

现在我尝试像这样将它导入 ./index.js：

import {MyInput} from './MyInput.react';

控制台返回错误：

Error: Minified React error #130

你刚才遇到的错误全文是：

Element type is invalid: expected a string (for built-in components) or 
a class/function (for composite components) but got: undefined.

这有什么问题？

【问题讨论】：

如果你搜索那个错误，你会发现超过 50 个 SO 结果，Link。所以不需要添加新的问题和答案:)
你是对的。每个问题在某种形式的某个地方都有一个答案。对于我的案例，我没有找到对异常“错误：缩小反应错误 #130”的快速直接解释。因此，我认为这个解释会帮助那些发现自己处于同样情况的人。
我遇到了这个错误，与类中作为 JSX.Element 的箭头函数有关。例如class myClass extends Component { CustomElement = () => { return
} render() { return
} } 在测试和调试中，没有什么可抱怨的。部署和发布时，它会崩溃并给出上面的错误。解决方案，渲染如下 customElement = () => { return
} 解决方案...使用 {this.customElement() } 渲染它

标签： reactjs ecmascript-6 es6-class

【解决方案1】：

答案很简单。但是，要快速找到问题并不容易。导出默认情况下需要不带大括号的导入：

export default class MyInput extends React.Component {
  ...
}

import MyInput from './MyInput.react';

或者您可以使用命名的导出（没有单词默认值）。然后你需要在导入中使用大括号：

export class MyInput extends React.Component {
  ...
}
  
import { MyInput } from './MyInput.react';

附：由于查找对变量（类、函数等）的引用的清晰和简单，一些开发人员认为命名导出/导入是一种很好的做法。

【讨论】：

你值得拥抱！
救命稻草。我的敬意。