조건부 반입 금지 명령/속성

Question

소품을 스타일로 사용하는 타이포그래피 구성 요소를 사용하면 이상적으로는 코드 힌트를 사용하여 소품을 기반으로 다른 소품을 사용하지 못하게 할 수있는 방법이 있습니까?

<Typography heading /> < - 유효

<Typography heading subheading /> < - 사용 및 부제목을 향하고 모두 위에서

유효하지 않은, 그러나 나는 그것이 분명이 불법 구문입니다 있는지 확인하고 싶습니다. 현재 내가 사용 : 잘 작동하지만,이 같은 <h1> 같은 요소를 대체 고려 더 자세한 구문입니다

<Typography type={ Typography.HEADING } /> 

합니다.

이것은 특정 반응 일 필요는 없습니다. 조건부로 소품/속성 집합의 여러 항목이 허용되지 않는다는 것을 조건으로 (예 : PHPStorm/WebStorm에서 또는 반응하는) linter를 사용하는 방법이 있으면 최선의 선택입니다. 그렇지 않으면 오류가 발생합니다.

현재 각각의 소품을 조사해 볼 수있는 사물의 반작용으로 하나 이상이 사실인지를 확인할 수 있지만 런타임보다는 오히려이를 유지하려고합니다.

Answer 1

마찬가지로 Fez에 의하면 런타임에 체크인 할 수 있습니다. 소품 유형을 특별히 사용하려면이 동작을 구현하는 사용자 정의 PropTypes를 실제로 작성할 수 있으며 런타임시이를 통지하지만 Webstorm의 linting이 오류를 선택하는 것처럼 보이지는 않습니다.

const exclusiveProps = (...excl) => (props, propName, componentName) => { 
 
    excl.forEach(prop =>{ 
 
    if (prop !== propName && props[prop] && excl.indexOf(propName) > excl.indexOf(prop)) { 
 
     throw new Error("Component "+componentName+" cannot have " + prop + " and " + propName) 
 
     } 
 
    }) 
 
}; 
 
const protectedProps = exclusiveProps("src", "href", "children"); 
 

 
const ImageLink = ({ 
 
    src, 
 
    href, 
 
    children 
 
}) => { 
 
    return <div className='ImageLink' style={{backgroundImage: `url(${src || href})`}}> 
 
    {children} 
 
    </div>; 
 
}; 
 

 
ImageLink.propTypes = { 
 
    src: protectedProps, 
 
    href: protectedProps 
 
}; 
 

 
ReactDOM.render(<ImageLink href="thing.jpg" src="thang.jpg" > Foo Bar </ImageLink>,app)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script> 
 
<div id="app"></div>

이 콘솔 출력에 관련된 에러를 생성

.

이

하여 PropType는 에러를 허용하도록 구성된 테스트 유닛에 의한 오류를 표시하는데 사용될 수있다.