Question

我启动组件mount（）运作良好，但我按F5响应该错误。

/* eslint-disable react/prop-types */
/* eslint-disable react/destructuring-assignment */
import React from 'react';
import {
  Col, Row, Input, Select, Upload, Icon, Form, Button,
} from 'antd';
import 'react-quill/dist/quill.snow.css';
import 'react-quill/dist/quill.core.css';


const { Option } = Select;

const NewPost = Form.create({ name: 'newPost' })(
  class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        loading: false,
        children: [],
      };
      if (typeof window !== 'undefined') {
        // eslint-disable-next-line global-require
        this.quill = require('react-quill');
      }
    }

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

    render() {
      const Quill = this.quill;
      console.log(Quill);
      const { props } = this;
      const { getFieldDecorator } = props.form;
      const imageUrl = '';
      const { loading, children } = this.state;
      const uploadButton = (
        <Row>
          <Icon type={loading ? 'loading' : 'plus'} />
          <Row className="ant-upload-text">Upload</Row>
        </Row>
      );
      return (
        <Form onSubmit={this.handleSubmit}>
          <Quill /> // error in here
          <Col span={20} offset={2}>
            <Row>
              <Button type="primary" className="text-right">Save</Button>
            </Row>
            <hr />
            <br />
            <Row>
              <Col span={17}>
                <Row>
                  <Col span={6}>Title</Col>
                  <Col span={18}>
                    <Form.Item>
                      {getFieldDecorator('title', {})(<Input />)}
                    </Form.Item>
                  </Col>
                </Row>
                <br />
                <Row>
                  <Col span={6}>Abstract</Col>
                  <Col span={18}>
                    <Form.Item>
                      {getFieldDecorator('abstract', {})(<Input.TextArea rows={6} />)}
                    </Form.Item>
                  </Col>
                </Row>
                <br />
                <Row>
                  <Col span={6}>Category</Col>
                  <Col span={18}>
                    <Form.Item>
                      <Select defaultValue="combobox" style={{ width: '100%' }}>
                        <Option value="combobox">Combobox</Option>
                      </Select>
                    </Form.Item>
                  </Col>
                </Row>
                <br />
                <Row>
                  <Col span={6}>Content</Col>
                  <Col span={18}>
                    <Form.Item>
                      {getFieldDecorator('content', {})(
                        <Input.TextArea rows={8} />,
                      )}
                    </Form.Item>
                  </Col>
                </Row>
              </Col>
              <Col span={6} offset={1}>
                <Row>
                  <Col>Status</Col>
                </Row>
                <br />
                <Row>
                  <Select defaultValue="public" style={{ width: '100%' }}>
                    <Option value="public">Public</Option>
                  </Select>
                </Row>
                <br />
                <Row>
                  <Col span={10}>Author</Col>
                  <Col>
                    <a href="#">Administrator</a>
                  </Col>
                </Row>
                <br />
                <Row>
                  <Col span={10}>Create at</Col>
                  <Col>
                    <a href="#">10/10/2019</a>
                  </Col>
                </Row>
                <br />
                <Row>
                  <Col span={10}>Last modified</Col>
                  <Col>
                    <a href="#">10/10/2019</a>
                  </Col>
                </Row>
                <br />
                <Row>
                  <Col>Tags</Col>
                </Row>
                <br />
                <Row>
                  <Col>
                    <Select mode="tags" style={{ width: '100%' }} placeholder="Tags">
                      {children}
                    </Select>
                  </Col>
                </Row>
                <br />
                <Row>
                  <Col>Thumbnail</Col>
                </Row>
                <br />
                <Row>
                  <Upload
                    listType="picture-card"
                    className="avatar-uploader"
                    showUploadList={false}
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    onChange={this.handleChange}
                  >
                    {imageUrl ? <img src={imageUrl} name="imageUrl" alt="avatar" /> : uploadButton}
                  </Upload>
                </Row>
                <br />
              </Col>
            </Row>
          </Col>
          <Col className="clear" />
          <style>
            {`
              .avatar-uploader .ant-upload,
              .avatar-uploader img {
                width: 100%;
              }
              hr{
                border: none;
                border-bottom: 1px solid rgb(235, 237, 240);
              }
              .text-right{
                float: right;
              }
              .clear{
                clear: both;
              }
            `}
          </style>
        </Form>
      );
    }
  },
);

export default NewPost;

出现以下错误：元素类型无效：期望使用字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义文件中导出组件，或者可能混淆了默认导入和命名导入。

Answer 1

您需要将其导入为

从“ NewPost组件的路径”中导入NewPost

例如：从“ ./NewPost”导入NewPost

并确保相对路径正确。

已修复React-Quill的工作示例： https://codesandbox.io/s/named-import-wufq9

您可能忘记了从其中定义的文件中导出组件

1 个答案: