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来完成此操作。您可以使用它：

xxx = [
|cursor|]

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

Answer 2

您可以在反应Enter a num: 22 22 dogs play Process finished with exit code 0中使用<img src="../imp/images/filename.ext>。自从React v15.5起，React.PropTypes已移至另一个包中。请改用prop-types库。 https://reactjs.org/docs/typechecking-with-proptypes.html

oneOfType

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
};

两套React propTypes

3 个答案: