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

Question

我的文件中有以下ReactJs组件/我的输入。反应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>
    );
  }
}

现在我试着把它导入到。/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.

这有什么错？

Answer 1

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

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

import MyInput from './MyInput.react';

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

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

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