根据标志反应道具类型不同的必需道具

Question

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

{
    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
};

但这给了我以下警告：

Warning: Failed prop type: Invalid prop config of value [object Object] supplied to MyComponent, expected one of [{"active":true},null].

in 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-types 库不提供此功能，因此使用自定义道具类型是可行的方法。

幸运的是，正如 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;

→ 参见updated code sandbox with solution。

根据标志反应道具类型不同的必需道具

React Prop Types Different Required Props Depending on Flag

reactjs

react-proptypes