Question

我在我的项目中使用react js和antd.design库。我正在尝试使用DRAWER组件，但出现错误：元素类型无效：应使用字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。

检查Drawer的呈现方法。

问题出在Drawer Component上，当我将其删除时，该项目运行正常，当我添加它时，错误再次出现

这是我的代码：

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}作为对象。确保所有参数都使用正确的数据类型。

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

1 个答案: