Question

我试图根据disableLightbox的属性有条件地使lightboxImage成为必需或不需要。然而，当我从lightboxImage读取道具时，我只获得第一级属性（src，width，height，aspectRatio）而不是级别（照片，disableLightbox）。有什么方法可以阅读所有属性吗？

Gallery.propTypes = {
    photos: React.PropTypes.arrayOf(
        React.PropTypes.shape({
            src: React.PropTypes.string.isRequired, 
            width: React.PropTypes.number.isRequired,
            height: React.PropTypes.number.isRequired,
            aspectRatio: React.PropTypes.number.isRequired,
            lightboxImage: props => console.log(props)
        })  
    ).isRequired,
    disableLightbox: React.PropTypes.bool
};

Answer 1

@MatthewHerbst解释了关键的想法，一个自定义验证器，但这里是一个更完整，更适用但更简单的示例代码的重写版本（仅供参考，未经测试）：

photos: function (props, propName, componentName) {
  // I don't know what `lightboxImage` is, I'll assume string.
  var lightboxImageValidator = React.PropTypes.string;
  if (!props.disableLightbox) {
    lightboxImageValidator = lightboxImageValidator.isRequired;
  }

  return React.PropTypes.arrayOf(
    React.PropTypes.shape({
      src: React.PropTypes.string.isRequired, 
      width: React.PropTypes.number.isRequired,
      height: React.PropTypes.number.isRequired,
      aspectRatio: React.PropTypes.number.isRequired,
      lightboxImage: lightboxImageValidator,
    })  
  ).isRequired.apply(this, arguments);
}

Answer 2

虽然使用标准PropType验证器是不可能的，但可以通过为disableLightbox或photos编写a custom validator来执行此操作。让我们使用disableLightbox来做，因为这就是你所问的：

disableLightbox: function(props, propName, componentName) {
  // First, we need to check that we're a Boolean
  // You could do this with PropTypes.boolean but it's much simpler to do it yourself
  let type = typeof props[propName];
  if (type !== 'boolean') {
    return new Error(propName + ' supplied to ' + componentName + ' is of type `' + type +'`. `boolean` expected. Validation failed.');
  }

  if (props[propName]) {
    if (props.hasOwnProperty('photos') {
      // Now we do the fun part. Here we are manually checking the validation of photos
      // using the built-in PropTypes, but this time with lightboxImage required
      let typeChecker = PropTypes.arrayOf(PropTypes.shape({
        lightboxImage.string.isRequired
      }));

      return typeChecker(props, 'photos', componentName, 'prop');
    } else {
      // Missing the photos prop
      return new Error(propName + ' supplied to ' + componentName + ' has a true value, but prop `photos` is missing. Validation failed.');
    }
  } else {
    // disableLightbox is false, so no need to check lightboxImage
  }
}

我强烈建议您仔细阅读文档中的自定义验证器示例（免责声明：我编写了customArrayProp示例）。上面的例子可能被认为有点hacky，但它应该工作。您还应该注意，如果photos很大，上面的内容可能会对性能产生影响，因为它基本上会再次运行验证。

访问React组件

2 个答案: