错误:Minified React错误#130

Question

我在文件./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.

这有什么问题？

Answer 1

答案很简单.但是要快速找到问题并不容易.在导出默认情况下,您需要导入不带花括号:

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

import MyInput from './MyInput.react';

或者您可以使用命名导出(没有默认值).然后你需要在导入中使用花括号:

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

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