ReactJS ES2015子组件

Question

我是ReactJS的新手，我在ES2015的基础上学习它。大多数例子是ES5。我的问题似乎是渲染子组件。

我的子组件是一个文本字段

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，则它应该呈现一个范围，如果为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;

当我尝试渲染这些控件时，会出现以下错误：

警告：作出反应。createElement:类型不应为null、未定义、布尔值或数字。它应该是字符串（对于DOM元素）或ReactClass（对于复合组件）。检查地址框的呈现方法。

未捕获不变冲突：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。检查地址框的呈现方法。

我能找到的所有例子都使用了前面的React。createClass方法。有人能告诉我为什么TextField会抛出错误吗？

Answer 1

我发现我使用了错误的导入语法。

我在用

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

当我应该使用：

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