检查`Drawer`的render方法。元素类型无效错误

Question

我在我的项目中使用react js和antd.design库。我正在尝试使用DRAWER组件但是我收到了一个错误：元素类型无效：期望一个字符串（用于内置组件）或一个类/函数（用于复合组件）但得到：object。

检查Drawer的渲染方法。

问题是抽屉组件，当我删除它时，项目运行完美，当我添加它时，错误再次出现

这是我的代码：

import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import "antd/dist/antd.css";
import React from "react";
import "antd/dist/antd.css";
import { Drawer, Button } from "antd";
import Stepper from "../addExperience/stepper";
import { Icon } from "antd";
import ElementClass from "./DrawerElement"
const IconText = ({ type, text }) => (
  <span>
    <Icon type={type} style={{ marginRight: 8 }} />
    {text}
  </span>
);
 class MyClass extends React.Component {
  state = { visible: false };

  showDrawer = () => {
    this.setState({
      visible: true
    });
  };

  onClose = () => {
    this.setState({
      visible: false
    });
  };

  render() {
    return (
      <div>
        <a style={{ color: "#A6A6A6" }} onClick={this.showDrawer}>
          {" "}
          <IconText type="edit" text="Modifier" />{" "}
        </a>
          <Drawer
          title="Modifier cette experience"
          width={720}
          placement="right"
          onClose={this.onClose}
          maskClosable={false}
          visible={this.state.visible}
          style={{
            height: "calc(100% - 55px)",
            overflow: "auto",
            paddingBottom: 53
          }}
        >
          <Stepper />
          <div
            style={{
              position: "absolute",
              bottom: 0,
              width: "100%",
              borderTop: "1px solid #e8e8e8",
              padding: "10px 16px",
              textAlign: "right",
              left: 0,
              background: "#fff",
              borderRadius: "0 0 4px 4px"
            }}
          >
            <Button
              style={{
                marginRight: 8
              }}
              onClick={this.onClose}
            >
              Cancel
            </Button>
            <Button onClick={this.onClose} type="primary">
              Mettre à jour
            </Button>
          </div>
        </Drawer>  
      </div>
    );
  }
}

MyClass.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles()(MyClass);

Answer 1

我认为你的问题是你在{}中包含一些参数，这使得提供的值成为一个对象，而不是预期的数据类型。

检查API documentation，例如说width想要一个string|number的数据类型，意思是字符串或数字。您指定了{720}这是一个对象。确保所有参数都使用正确的数据类型。