有条件地拒绝 Prop/Attribute

Question

给定一个以 props 作为样式的 Typography 组件，有没有一种方法可以根据使用的 prop 来禁止其他 props，最好是通过代码提示。

<Typography heading /> <-- 有效

<Typography heading subheading /> <-- 无效

在上面使用了 heading 和 subheading，但是我想明确指出这是非法语法。目前我使用：

<Typography type={ Typography.HEADING } />

效果很好，但考虑到这是替换 <h1>.

等元素，语法更冗长

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

目前，对于事物的反应方面，我可以检查每个 prop 以查看是否有多个 prop 是真实的，但我宁愿将其保留在运行时之外。

Answer 1

正如 Fez 所说，您可以只检查运行时。如果你想专门使用 prop 类型，你实际上可以编写实现此行为的自定义 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 错误的单元测试来显示错误。

有条件地拒绝 Prop/Attribute

React Conditionally Disallow Prop/Attribute

phpstorm

webstorm

reactjs