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 prop吡啶supplied to {窗格{1}}

为什么？

Answer 1

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

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

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

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

1 个答案: