React：如何继承 PropTypes？

Question

我有一个 React Router Dom 和 Material UI 的包装器组件：

import Button from '@material-ui/core/Button';
import React from 'react';
import { Link as RouterLink } from 'react-router-dom';

const forwardedLink = React.forwardRef((props, ref) => (
  <RouterLink innerRef={ref} {...props} />
));

function Link(props) {
  return (
    <Button component={forwardedLink} {...props}>
      {props.children}
    </Button>
  );
}

Link.propTypes = // ?

export default Link;

我怎样才能给Link 来自Button 的Prop-Types？

Answer 1

请参阅this other SO answer，以下应该可以工作。

/**
 * @type React.ForwardRefRenderFunction<React.FunctionComponent, ButtonPropTypes>
 */
const Button = forwardRef(({ text, icon }, ref) => (
  <button ref={ref}>{text}{icon}</button>
))

const ButtonPropTypes = {
  text: string.isRequired,
  icon: string.isRequired,
}

Button.propTypes = ButtonPropTypes

Answer 2

哎呀.. 抱歉，我一开始没有看到您正在尝试获取 来自节点模块的 propTypes。无论如何..如果有人需要这个 在自己的组件中继承 propTypes 我留下答案*

这对我有用（使用我自己的组件） 将 props 导出为常量，并将其分配给继承对象和继承对象中的 component.propTypes。

注意，首先我犯了一个我没有看到的错误。我忘了在所有内部对象上使用形状，如下所示：

export const configurationPropTypes = {  
  id: PropTypes.string,
  // note: PropTypes.shape not wrapping the 'os' object
  os: {
      version: PropTypes.string,
      locale: PropTypes.string
  }
};

上面是错误的，下面是正确的。 =)

//component being inherited 'ConfigurationListItem.js'
export const configurationPropTypes = {  
  id: PropTypes.string,
  os: PropTypes.shape({
      version: PropTypes.string,
      locale: PropTypes.string
  })
};

ConfigurationListItem.propTypes = configurationPropTypes;

//in 'QueueListItem.js', the component using ConfigurationListItem and inheriting it's propTypes

import ConfigurationListItem , {configurationPropTypes}from './ConfigurationListItem';
//...
QueueListItem.propTypes = {
  id: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  configurations: PropTypes.arrayOf(PropTypes.shape(configurationPropTypes))
}