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但是如果它是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;

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

警告：React.createElement：type不应为null，未定义，   布尔值或数字。它应该是一个字符串（对于DOM元素）或a   ReactClass（用于复合组件）。检查渲染方法   AddressBox。

未捕获的不变违规：元素类型无效：预期a   string（用于内置组件）或类/函数（用于复合   组件）但得到：未定义。检查渲染方法   AddressBox。

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

Answer 1

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

我正在使用

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

当我应该使用时：

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

ReactJS ES2015儿童组件

1 个答案: