ReactJS ES2015 Компоненты для детей

Question

Я новичок в ReactJS, и я изучаю его на основе ES2015. Большинство примеров - ES5. Моя проблема заключается в рендеринге дочерних компонентов.

Мой ребенок компонент является 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; 

Мои родительские компоненты называется AddressBox и будет содержать многие из дочерних элементов управления. Если displayMode имеет значение true, тогда он должен отображать SPAN, но если он является ложным, он должен отображать элемент управления формой.

Код адреса коробка:

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 .

Все примеры, я могу найти использовании предыдущего React .createClass. Может ли кто-нибудь сказать мне, почему TextField выдает ошибку?

Answer 1

Я понял, что использовал неправильный синтаксис импорта.

Я использовал

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

, когда я должен был использовать:

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