web-dev-qa-db-ja.com

エラー：縮小Reactエラー＃130

ファイル./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.

何が問題なのですか？

reactjsecmascript-6es6-class
6
Roman

答えは非常に簡単です。ただし、問題をすばやく見つけることは容易ではありません。エクスポートのデフォルトの場合、中括弧なしでインポートする必要があります。

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

import MyInput from './MyInput.react';

または、名前付きエクスポートを使用できます（Wordのデフォルトなし）。次に、インポートで中括弧を使用する必要があります。

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

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

追伸現在、一部の開発者は、変数（クラス、関数など）への参照を見つけることの明快さと単純さのために、名前付きエクスポート/インポートをお勧めします。

15
Roman