有条件地拒绝道具/属性

Question

给定一个带有道具作为样式的Typography组件，有没有办法根据所使用的道具禁用其他道具，理想情况是通过代码提示。

<Typography heading />＆lt; - 有效

<Typography heading subheading />＆lt; - 无效

在上面，使用了标题和子标题，但我想明白这是非法语法。目前我使用：

<Typography type={ Typography.HEADING } />

哪种方法效果很好，但考虑到这会替换<h1>之类的元素，语法更加冗长。

这不必具体反应。如果有一种方法使用linter（在PHPStorm / WebStorm中，或做出反应）有条件地显示不允许多组props /属性，那将是最好的，否则我想抛出一个错误。

目前有了反应的一面，我可以检查每个道具，看看是否有多个是真的，但我宁愿将其保留在运行时间之外。

Answer 1

正如Fez所说，你可以在运行时检查。如果你想专门使用prop类型，你实际上可以编写实现这种行为的自定义PropTypes，并在运行时通知它，但它看起来不像Webstorm的linting拾取错误。

＆＃13;

＆＃13;

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)

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这会在控制台输出中生成相关错误。

这可用于显示配置为禁止PropType错误的单元测试的错误。