两套React propTypes

Question

我有一个动态接收不同道具的组件。如何用propTypes显示这个？我在想这样的事情 -

export default class Component extends React.Component {
  static propTypes = {
    propsOne: PropTypes.object,
  };
// OR
  static propTypes = {
    propsTwo: PropTypes.object,
  };
  // ...
}

Answer 1

您可以使用现有的React.PropTypes.oneOfType API来完成此任务。您会像以下一样使用它：

static propTypes = {
    propOne: React.PropTypes.oneOfType([
        React.PropTypes.string,
        React.PropTypes.number
    ]),
    ...
};

但是，如果您的类型检查需要逻辑，您可能需要使用Andy的答案。但是如果你的类型检查要求逻辑比“这个支柱可以是多种类型之一”更复杂，那么重新考虑堆栈中较高的逻辑可能符合你的最佳利益，因此这不是必需的。

Answer 2

你可以使用oneOfType来反应prop-types。自React v15.5起，React.PropTypes已移至另一个包中。请改用prop-types库。 https://reactjs.org/docs/typechecking-with-proptypes.html

import PropTypes from 'prop-types';

static propTypes = {
    propOne: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.number
    ]),
    ...
};

Answer 3

您可以使用自定义验证器，使用一个抽象级别来指定道具名称

// Generate a custom React validation function
function eitherProp( prop1, prop2 ) {
    return ( props, propName, componentName ) => {
        const hasProp1 = typeof props[ prop1 ] === 'object';
        const hasProp2 = typeof props[ prop2 ] === 'object';

        // If both are provided, or neither, error
        if( ( hasProp1 && hasProp2 ) || !( hasProp1 || hasProp2 ) ) {
            return new Error( `Please provide either ${prop1} or ${prop2} of type object, not both` );
        }
    };
}

// Generate a reusable function for both props
const propsOneOrTwo = eitherProp( 'propsOne', 'propsTwo' );

static propTypes = {
    propsOne: propsOneOrTwo,
    propsTwo: propsOneOrTwo
};