Question

我从搜索，下拉列表和组的src / components文件夹中导入了组件

“组”组件包含搜索和下拉组件，因此我创建了一个“产品”页面来显示它们。

这是我的代码 src/pages/product.

import React from "react";
import { Container, Row, Col } from "react-bootstrap";
import Header from "../../components/Header/index"
import Group from "../../components/Group/index"
import Dropdown from "../../components/Dropdown/index"
import Search from "../../components/Search/index"
import ProductItem from "../../components/ProductItem/index"
import "../Product/index.css";

const Product = () => {
  return (
    <Container>
      <Header />
      <Row>
        <Group
          title="Product group"
          element={<Dropdown items={["Milk Tea", "Juice"]} />}
        />
        <Group
          title="Sort by price"
          element={<Dropdown items={["Low to hight", "Hight to low"]} />}
        />
        <Group
          title="Search"
          element={Search}
        />
      </Row>
    </Container>
  );
}

export default Product;

这是src/component/Group

import React from "react";
import { Col, Row } from "react-bootstrap";
import PropTypes from "prop-types";
import "../Group/index.css";
import "../../common/index.css";

const Group = ({ title, element }) => {
  return (
    <Col bsPrefix="group">
      <h4 className="title group-title">{title}</h4>
      <Row className="group-element">{element}</Row>
    </Col>
  );
};

Group.propTypes = {
  title: PropTypes.string,
  element: PropTypes.object,
};

Group.defaultProps = {
  title: "",
  element: [],
};

export default Group;

我不明白为什么会有这个警告，我不知道我在哪里错

Failed prop type: Invalid prop `element` of type `function` supplied to `Group`, expected `object`.

Answer 1

您正在期待对象。并传递defaultProps数组。要么做：

Group.propTypes = {
  title: PropTypes.string,
  element: PropTypes.object,
};

Group.defaultProps = {
  title: "",
  element: {},
};

或

Group.propTypes = {
  title: PropTypes.string,
  element: PropTypes.array,
};

Group.defaultProps = {
  title: "",
  element: [],
};

Answer 2

由于要传递react元素作为元素prop，因此应在Group组件中将其作为PropTypes.func接受。 func 涵盖了功能类型以及作为prop传递的react组件。请尝试这个，它应该可以工作。

Group.propTypes = {
  title: PropTypes.string,
  element: PropTypes.func,
};

Group.defaultProps = {
  title: "",
  element: ()=>{},
};

道具类型失败：提供给“组”的“功能”类型道具无效的“元素”，预期为“对象”

2 个答案: