ReactJS ES2015子コンポーネント

Question

私はReactJSを初めて使いました。私はES2015に基づいて学習しています。ほとんどの例はES5です。私の問題は、子コンポーネントをレンダリングするようです。

私の子コンポーネントはAddressBoxのTextField

import React, {Component} from 'react'; 

class TextField extends Component { 
    constructor(props, context){ 
    super(props, context); 
    this.state = { 
     customer: { 
     custno: props.customer.custno 
     } 
    }; 
    } 

    render() { 
     if(this.props.displayMode) { 
     return <span>{this.props.custno}</span> 
     } 
     return <input type="text" {...this.props} /> 
    } 
} 

export default TextField; 

私の親コンポーネントと呼ばれていると、子コントロールの多くが含まれています。 displayModeがtrueの場合はSPANをレンダリングする必要がありますが、falseの場合はフォームコントロールをレンダリングする必要があります。

アドレスボックスのコードは次のとおりです。

import React, {Component} from 'react'; 
import {TextField} from '../textfield/textfield.js'; 

class AddressBox extends Component { 
    constructor(props, context){ 
    super(props, context); 
    this.state = { 
     customer: { 
     custno: "" 
     } 
    }; 
    this.onCustomerNumberChange = this.onCustomerNumberChange.bind(this); 
    } 

    onCustomerNumberChange(event) { 
    const customer = this.state.customer; 
    customer.custnumber = event.target.value; 
    this.setState({customer: customer}); 
    } 

    render() { 
     return (
     <div className="addressbox"> 
      <h1>Address Box</h1> 
      <label>Customer Number:</label> 
      <TextField value={this.state.customer.custno} onChange={this.onCustomerNumberChange} /> 
     </div> 
    ); 
    } 
} 

AddressBox.defaultProps= { 
    customer: { 
    name: "", 
    custnumber: "" 
    } 
} 

export default AddressBox; 

私はこれらのコントロールをレンダリングしようとすると、私は次のエラーを取得する：

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of AddressBox .

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of AddressBox .

私は見つけることができる例はすべてが反応以前を使用しています.createClassメソッド。 TextFieldがエラーを投げている理由を教えてもらえますか？

Answer 1

誤ったインポート構文を使用していることがわかりました。

私が使用している必要があるとき、私は

import {TextField} from '../textfield/textfield'; 

を使用していた

：

import TextField from '../textfield/textfield';