反应道具类型根据旗帜不同所需的道具

Question

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

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

在某些情况下，我希望通过使用active:false传入另一个对象来禁用组件显示的功能，如下所示：

{
    active: false
}

这工作正常，不是问题。

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

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

我如何为这样的情况定义道具类型？

我试过：

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

但这给了我以下警告：

警告：失败的道具类型：提供给MyComponent的值[object object]无效的道具config，应为[{“active”：true}，null]之一。

在MyComponent中

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

问题是，有没有办法让它发挥作用？

我做了一个可运行的沙盒示例，您可以尝试上面的示例代码：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不提供此功能，因此使用自定义的prop-types是一种可行的方法。

幸运的是，正如Tom Fenech在对我的问题的评论中指出的，这个特殊的问题已经解决了，所以我使用了一个可用的npm包：反应-需要-如果。

我的工作解决方案如下：

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;

→ 请参阅更新的代码沙盒和解决方案。