条件付きで条件付きで禁止する属性/属性を無効にする

Question

スタイルとして小道具を使用するタイポグラフィコンポーネントがある場合、使用される小道具、理想的にはコードヒントに基づいて他の小道具を禁止する方法があります。

<Typography heading /> < - 有効

<Typography heading subheading /> < - 無効

上記見出しと小見出しが使用されているの両方で、しかし、私はそれが明らかにこれは不正な構文であることを確認したいと思います。現在、私は使用します。

<Typography type={ Typography.HEADING } /> 

うまく動作しますが、より詳細な構文は、このような<h1>としてエレメント交換されて考慮されています。

これは反応特異的である必要はありません。 （PHPStorm/WebStormで、または反応する）リンターを使用して条件的に複数の小道具/属性のセットが許可されていないことが示されている場合、それが最善の方法です。そうでなければエラーを投げたいです。

現在、物事の反応面で、私は複数のものが真であるかどうかを確認するために各小道具をチェックすることができましたが、それはむしろ実行時間のそれを保つだろう。

Answer 1

Fez氏によると、実行時にチェックインできるだけです。小道具の種類を具体的に使用したい場合は、実際にこの動作を実装するカスタムPropTypeを記述し、実行時に通知しますが、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エラーを禁止するように構成されたユニットテストによってエラーを示すために使用することができます。