Question

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

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

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

{
    active: false
}

这很好用，不是问题。

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

如果有效，则需要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的值为[object Object]的道具MyComponent无效，预期为[{＆＃34;有效＆＃34;：true}，null]
在MyComponent中

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

问题是，有没有办法使这项工作？

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

Answer 1

您可以使用自定义propType函数，例如：

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

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

反应道具类型不同的必需道具取决于旗

2 个答案: