Question

我正在使用ant design UI中的Registration Form。我刚刚复制并粘贴了它，但是在Chrome的控制台中遇到了这个奇怪的错误，因为我没有修改antd.min.js：

antd.min.js:23 Uncaught TypeError: Cannot read property 'Component' of undefined
    at Object.<anonymous> (antd.min.js:23)
    at t (antd.min.js:7)
    at Object.<anonymous> (antd.min.js:31)
    at t (antd.min.js:7)
    at Object.<anonymous> (antd.min.js:50)
    at t (antd.min.js:7)
    at Object.<anonymous> (antd.min.js:7)
    at t (antd.min.js:7)
    at antd.min.js:7
    at antd.min.js:7
(anonymous) @ antd.min.js:23
t @ antd.min.js:7
(anonymous) @ antd.min.js:31
t @ antd.min.js:7
(anonymous) @ antd.min.js:50
t @ antd.min.js:7
(anonymous) @ antd.min.js:7
t @ antd.min.js:7
(anonymous) @ antd.min.js:7
(anonymous) @ antd.min.js:7
(anonymous) @ antd.min.js:7
(anonymous) @ antd.min.js:7

index.html如下：

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>React Project</title>
  <link href="/assets/stylesheet/antd.min.css" rel="stylesheet" type="text/css">
  <link href="/assets/stylesheet/stylesheet.css" rel="stylesheet" type="text/css">
  <script src="/assets/antd.min.js"></script>
</head>

<body>
  <div id="main">
    <div id="registration"></div>
  </div>
  <script src="/build/bundle.js"></script>
</body>

</html>

registration.js看起来像：

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

import {
  Form,
  Input,
  Tooltip,
  Icon,
  Cascader,
  Select,
  Row,
  Col,
  Checkbox,
  Button,
  AutoComplete
} from 'antd';

const FormItem = Form.Item;
const Option = Select.Option;
const AutoCompleteOption = AutoComplete.Option;

export default class RegistrationForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      confirmDirty: false,
      autoCompleteResult: []
    };
  }

  handleSubmit(e) {
    console.log('i\'m here');
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  }

  handleConfirmBlur(e) {
    const value = e.target.value;
    this.setState({
      confirmDirty: this.state.confirmDirty || !!value
    });
  }

  compareToFirstPassword(rule, value, callback) {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('password')) {
      callback('Two passwords that you enter is inconsistent!');
    } else {
      callback();
    }
  }

  validateToNextPassword(rule, value, callback) {
    const form = this.props.form;
    if (value && this.state.confirmDirty) {
      form.validateFields(['confirm'], {force: true});
    }
    callback();
  }

  handleWebsiteChange(value) {
    let autoCompleteResult;
    if (!value) {
      autoCompleteResult = [];
    } else {
      autoCompleteResult = ['.com', '.org', '.net'].map(domain => `${value}${domain}`);
    }
    this.setState({autoCompleteResult});
  }

  render() {
    const {getFieldDecorator} = this.props.form;
    const {autoCompleteResult} = this.state;

    const formItemLayout = {
      labelCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 8
        }
      },
      wrapperCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 16
        }
      }
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0
        },
        sm: {
          span: 16,
          offset: 8
        }
      }
    };
    const prefixSelector = getFieldDecorator('prefix', {initialValue: '98'})(<Select style={{
        width: 70
      }}>
      <Option value="98">+98</Option>
    </Select>);

    const websiteOptions = autoCompleteResult.map(website => (<AutoCompleteOption key={website}>{website}</AutoCompleteOption>));

    return (
        <Form className="RegistrationForm" onSubmit={this.handleSubmit}>
          <FormItem {...formItemLayout} label="E-mail">
            {
              getFieldDecorator('email', {
                rules: [
                  {
                    type: 'email',
                    message: 'The input is not valid E-mail!'
                  }, {
                    required: true,
                    message: 'Please input your E-mail!'
                  }
                ]
              })(<Input/>)
            }
          </FormItem>
          <FormItem {...formItemLayout} label="Password">
            {
              getFieldDecorator('password', {
                rules: [
                  {
                    required: true,
                    message: 'Please input your password!'
                  }, {
                    validator: this.validateToNextPassword
                  }
                ]
              })(<Input type="password"/>)
            }
          </FormItem>
          <FormItem {...formItemLayout} label="Confirm Password">
            {
              getFieldDecorator('confirm', {
                rules: [
                  {
                    required: true,
                    message: 'Please confirm your password!'
                  }, {
                    validator: this.compareToFirstPassword
                  }
                ]
              })(<Input type="password" onBlur={this.handleConfirmBlur}/>)
            }
          </FormItem>
          <FormItem {...formItemLayout} label="Phone Number">
            {
              getFieldDecorator('phone', {
                rules: [
                  {
                    required: true,
                    message: 'Please input your phone number!'
                  }
                ]
              })(<Input addonBefore={prefixSelector} style={{
                  width: '100%'
                }}/>)
            }
          </FormItem>
          <FormItem {...formItemLayout} label="Website">
            {
              getFieldDecorator('website', {
                rules: [
                  {
                    required: true,
                    message: 'Please input website!'
                  }
                ]
              })(<AutoComplete dataSource={websiteOptions} onChange={this.handleWebsiteChange} placeholder="website">
                <Input/>
              </AutoComplete>)
            }
          </FormItem>
          <FormItem {...formItemLayout} label="Captcha" extra="We must make sure that your are a human.">
            <Row gutter={8}>
              <Col span={12}>
                {
                  getFieldDecorator('captcha', {
                    rules: [
                      {
                        required: true,
                        message: 'Please input the captcha you got!'
                      }
                    ]
                  })(<Input/>)
                }
              </Col>
              <Col span={12}>
                <Button>Get captcha</Button>
              </Col>
            </Row>
          </FormItem>
          <FormItem {...tailFormItemLayout}>
            <Button type="primary" htmlType="submit" onClick={this.handleSubmit}>Register</Button>
          </FormItem>
        </Form>
      );
  }
}

main.js包含：

import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, AutoComplete } from 'antd';

    const WrappedRegistrationForm = Form.create()(RegistrationForm);

    ReactDOM.render(<WrappedRegistrationForm />, document.getElementById('main'));

我该如何解决？

Answer 1

我收到了我一位朋友的以下评论：

我看不到您的代码库，但我想原因是您尝试按需导入，但未在项目中使用babel-plugin-import。

请参考文档中的Import on Demand部分。

如果您使用的是create-react-app，则可以查看说明here。

未捕获的TypeError：无法读取未定义的属性“ Component”

1 个答案: