2017-01-04 5 views
0

나는 서로 다른 소품을 동적으로받는 구성 요소를 가지고 있습니다. propType으로 이것을 어떻게 보이나요?두 세트의 React propType

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

[이 답변] (http://stackoverflow.com/a/33982256/1301872) 도움이 될 것 같아요. –

답변

1

당신은 소품 이름

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

당신은이 작업을 수행하기 위해 기존 React.PropTypes.oneOfType API를 사용할 수를 지정하는 추상화의 한 단계로, 사용자 지정 유효성 검사기를 사용할 수 있습니다 -이 같은 것을 생각했다. 당신은 그것을 좋아 사용할 것이다 : 당신의 유형 검사는 논리이 필요한 경우

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

그러나 앤디의 대답에 갈 필요가 있습니다. 그러나 유형 검사에서 "이 소품이 여러 유형 중 하나 일 수 있습니다"보다 복잡한 논리가 필요한 경우 스택이 높을 때까지 논리를 다시 방문하여 필요하지 않도록 최선을 다할 수 있습니다.

관련 문제