传入图标数组时，propTypes 应该是 func 控制台警告

Question

我有以下组件，

import React from 'react';
import PropTypes from 'prop-types';
import * as HIcons from '@heroicons/react/outline';

export default function Button({ type, variant, icon, label }) {
  const { ...icons } = HIcons;
  const TheIcon = icons[icon];

  return (
    <div>
      <button type={type} className={['btn', `btn--${variant}`].join(' ')}>
        <TheIcon className="w-4 h-4 mr-2" />
        {label}
      </button>
    </div>
  );
}

Button.propTypes = {
  type: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
  icon: PropTypes.oneOf[Object.keys(HIcons)],
  variant: PropTypes.oneOf(['sm', 'md', 'lg'])
};

Button.defaultProps = {
  type: 'button',
  label: 'Submit',
  icon: 'SaveIcon',
  variant: 'md'
};

我有以下故事书故事文件

import Button from '.';
import * as HIcons from '@heroicons/react/outline';

const { ...icons } = HIcons;

export default {
  title: 'Components/Buttons',
  component: Button,
  argTypes: {
    type: {
      options: ['button', 'submit', 'reset'],
      control: {
        type: 'select'
      }
    },

    icon: {
      options: Object.keys(icons),
      control: {
        type: 'select'
      }
    }
  }
};

const Template = (args) => <Button {...args} />;

export const Small = Template.bind({});
Small.args = {
  label: 'Small',
  variant: 'sm',
  icon: 'SaveIcon'
};

据我所知，我正在正确传递所有内容，我可以切换图标等等，但是，我收到以下控制台错误

Warning: Failed prop type: Button: prop type `icon` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.

如果我是 propTypes 的新手，任何解决此警告的帮助都会很棒。

Answer 1

将你的 proptypes 更改为此

Button.propTypes = {
  type: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
  icon: PropTypes.oneOf(Object.keys(HIcons)),
  variant: PropTypes.oneOf(['sm', 'md', 'lg'])
};

你写错了这个:

icon: PropTypes.oneOf[Object.keys(HIcons)],

传入图标数组时，propTypes 应该是 func 控制台警告

propTypes should be a func console warning when passing in array of icons

javascript

reactjs

react-proptypes

storybook