Reactjs 两套不同的类型

Reactjs 两套不同的类型,reactjs,react-proptypes,Reactjs,React Proptypes,我有一个组件可以动态接收不同的道具。我如何用propTypes显示这一点?我是这么想的- export default class Component extends React.Component { static propTypes = { propsOne: PropTypes.object, }; // OR static propTypes = { propsTwo: PropTypes.object, }; // ... } 您可以使用自定义验证

我有一个组件可以动态接收不同的道具。我如何用propTypes显示这一点?我是这么想的-

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

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

// 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
};
您可以使用现有的API来实现这一点。你会像这样使用它:

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

然而,如果你的类型检查需要逻辑,你可能需要按照安迪的答案。但是,如果您的类型检查需要的逻辑比这个属性可能是多种类型中的一种更复杂,那么您最好重新访问堆栈上更高的逻辑,这样就不需要了。

您可以使用react属性类型中的一种类型。自React v15.5以来,React.PropTypes已移动到另一个包中。请改用道具类型库。


我认为可能会有帮助。React.PropTypes自React v15.5以来已迁移到另一个包中。请改用道具类型库从“道具类型”导入道具类型;静态propTypes={propOne:propTypes.oneOfType[propTypes.string,propTypes.number],…};
import PropTypes from 'prop-types';

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