React Prop 类型根据 Flag 需要不同的 props

Question

我有一个 React 组件，它获取一个配置对象作为道具，它看起来像这样：

{
    active: true,
    foo: {
         bar: 'baz'
    }
}

在某些情况下，我想通过传入不同的对象来禁用组件显示的功能active: false，如下所示：

{
    active: false
}

这工作正常，不是问题。

但是，我还想确保使用我的组件的客户端代码提供正确的配置对象：

• 如果 active 为真，则需要 foo
• 如果 active 为 false，则 foo 是可选的，不需要提供

我如何为这样的案例定义道具类型？

我试过了：

MyComponent.propTypes = {
    config: PropTypes.oneOf([
        {
            active: false
        },
        PropTypes.shape({
            active: true,
            foo: PropTypes.shape({
                bar: PropTypes.string.isRequired
            })
        }).isRequired
    ]).isRequired
};

但这给了我以下警告：

警告：失败的道具类型：提供给config的值的无效道具，预期为 [{"active":true},null] 之一。[object Object]MyComponent

在我的组件中

我知道为什么这不起作用：这是因为PropTypes.oneOf不希望动态道具类型匹配器作为值，而只是一个有效参数数组。

问题是，有没有办法让这个工作？

我制作了一个可运行的沙箱示例，您可以在其中尝试上面的示例代码：https : //codesandbox.io/s/n9o0wl5zlj

Answer 1

您可以使用自定义 propType （在 propTypes 站点上记录）函数，例如：

MyComponent.proptypes = {
    active: PropTypes.bool,
    foo: function(props, propName, componentName) {
        if (props['active'] && !props[propName]) {
            return new Error(
                `${propName} is required when active is true in ${componentName}.`
            );
        }
    }
}

Answer 2

正如wgcrouch他的回答中所建议的那样，prop-typeslib 不提供此功能，因此使用自定义道具类型是可行的方法。

幸运的是，正如 Tom Fenech 在对我的问题的评论中指出的那样，这个特殊问题已经解决，所以我使用了一个 npm 包：react-required-if。

我的工作解决方案如下所示：

import React from 'react';
import PropTypes from 'prop-types';
import requiredIf from 'react-required-if';

function MyComponent({ config }) {
  if (!config.active) {
    return null;
  }
  return <h1>Hello {config.foo.bar}!</h1>;
}

MyComponent.propTypes = {
  config: PropTypes.shape({
    active: PropTypes.bool.isRequired,
    foo: requiredIf(
      PropTypes.shape({
        bar: PropTypes.string.isRequired
      }),
      props => props.active
    )
  })
};

export default MyComponent;

? 请参阅带有解决方案的更新代码沙箱。