为什么我会收到无效的道具类型警告？

Question

我有以下组件：

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Box } from 'grid-styled';

const Pane = ({
  children,
  px,
  py,
}) => (
  <StyledBox
    px={px}
    py={py}
  >
    {children}
  </StyledBox>
);

Pane.propTypes = {
  children: PropTypes.node.isRequired,
  px: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.object)]),
  py: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.object)]),
  marginBottom: PropTypes.number,
  color: PropTypes.string,
};

Pane.defaultProps = {
  px: [null],
  py: [32, 40],
};

export default Pane;

我的网络客户端的 JS 控制台发出以下警告：

preview.bundle.js:4294 Warning: Failed prop type: Invalid proppysupplied to窗格. in Pane

为什么？

Answer 1

py: [32, 40], 是一个数字数组，而您声明它应该是 PropTypes.arrayOf(PropTypes.object) - 一个对象数组。不一样。

py: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),

这意味着它将是单个数字，如 4 或数字数组，如 [32, 40]。

为什么我会收到无效的道具类型警告？

Why am I getting an invalid prop type warning?

reactjs

react-proptypes

styled-components