Question

是否有内置的方法来使用proptypes来确保传递给组件的对象数组实际上是特定形状的对象数组？

也许是这样的？

annotationRanges: PropTypes.array(PropTypes.shape({
    start: PropTypes.number.isRequired,
    end: PropTypes.number.isRequired,
})),

我错过了一些非常明显的东西吗？这样看起来很受欢迎。

Answer 1

您可以使用public boolean acquire(long timeout, TimeUnit timeUnit) { // actual implementation } static final Duration MAX_WAIT = Duration.ofNanos(Long.MAX_VALUE); public boolean acquire(Duration timeout) { return acquire( timeout.compareTo(MAX_WAIT)>=0? Long.MAX_VALUE: timeout.toNanos(), TimeUnit.NANOSECONDS); }作为React.PropTypes.shape()的参数：

React.PropTypes.arrayOf()

请参阅文档的Prop Validation部分。

<强>更新

从// an array of a particular shape. ReactComponent.propTypes = { arrayWithShape: React.PropTypes.arrayOf(React.PropTypes.shape({ color: React.PropTypes.string.isRequired, fontSize: React.PropTypes.number.isRequired, })).isRequired, }开始，不推荐使用react v15.5，而应使用独立的包React.PropTypes：

prop-types

Answer 2

是的，您需要在代码中使用PropTypes.arrayOf代替PropTypes.array，您可以执行以下操作：

import PropTypes from 'prop-types';

MyComponent.propTypes = {
  annotationRanges: PropTypes.arrayOf(
    PropTypes.shape({
      start: PropTypes.string.isRequired,
      end: PropTypes.number.isRequired
    }).isRequired
  ).isRequired
}

有关 proptypes 的详细信息，请访问使用PropTypes进行Typechecking here

Answer 3

而且......就在我的鼻子底下......

来自反应文档本身：https://facebook.github.io/react/docs/reusable-components.html

// An array of a certain type
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),

Answer 4

有ES6速记导入，你可以参考。更易读，更容易打字。

import React, { Component } from 'react';
import { arrayOf, shape, number } from 'prop-types';

class ExampleComponent extends Component {
  static propTypes = {
    annotationRanges: arrayOf(shape({
      start: number,
      end: number,
    })).isRequired,
  }

  static defaultProps = {
     annotationRanges: [],
  }
}

Answer 5

如果我要多次为特定形状定义相同的proptypes，我喜欢将它抽象为proptypes文件，这样如果对象的形状发生变化，我只需要在一个地方更改代码。它有助于干掉代码库。

示例：

// Inside my proptypes.js file
import PT from 'prop-types';

export const product = {
  id: PT.number.isRequired,
  title: PT.string.isRequired,
  sku: PT.string.isRequired,
  description: PT.string.isRequired,
};


// Inside my component file
import PT from 'prop-types';
import { product } from './proptypes;


List.propTypes = {
  productList: PT.arrayOf(product)
}

Answer 6

这也是我防止空数组的解决方案：

import React, { Component } from 'react';
import { arrayOf, shape, string, number } from 'prop-types';

ReactComponent.propTypes = {
  arrayWithShape: (props, propName, componentName) => {
    const arrayWithShape = props[propName]
    PropTypes.checkPropTypes({ arrayWithShape:
        arrayOf(
          shape({
            color: string.isRequired,
            fontSize: number.isRequired,
          }).isRequired
      ).isRequired
    }, {arrayWithShape}, 'prop', componentName);
    if(arrayWithShape.length < 1){
      return new Error(`${propName} is empty`)
    }
  }
}

具有形状的反应proptype数组

6 个答案: