Reactjs 错误：缩小反应错误#130

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

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>
    );
  }
}

控制台将返回错误：

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.

---

这有什么不对？

答案很简单。然而，要迅速发现问题并不容易。 在导出默认值的情况下，需要导入不带花括号的内容：

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

import MyInput from './MyInput.react';

或者您可以使用命名的导出（不带单词default）。然后需要在导入中使用花括号：

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

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

---

P.S.S.现在，一些开发人员认为命名导出/导入是一个很好的实践，因为找到变量（类、函数等）的引用是简单明了的。

如果你搜索这个错误，你会发现超过50个结果。所以不需要添加新的问题并回答：）你是对的。每个问题都有某种形式的答案。对于我的案例中的异常“错误：缩小的反应错误#130”，我没有很快找到直接的解释。因此，我认为这个解释会帮助那些发现自己处于同样处境的人。你应该得到一个拥抱！

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

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