Question

我在文件中有以下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>
    );
  }
}

现在我尝试将它导入./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';

错误：Minified React错误＃130

1 个答案: