형태와 함께 Proptype 배열 반응

형태와 함께 Proptype 배열 반응

컴포넌트에 전달되는 오브젝트의 배열이 실제로 특정 형상의 오브젝트의 배열이 되도록 하기 위해 proptypes를 사용하는 빌트인 방법이 있습니까?

이런 거?

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

내가 너무 뻔한 걸 놓쳤나?이건 매우 인기가 있을 것 같네요.

사용할 수 있습니다.React.PropTypes.shape()의 의론으로서React.PropTypes.arrayOf():

// 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,
}

매뉴얼의 Prop Validation 섹션을 참조하십시오.

갱신하다

현재react v15.5,사용.React.PropTypes권장되지 않으며 스탠드아론 패키지prop-types대신 을 사용해야 합니다.

// an array of a particular shape.
import PropTypes from 'prop-types'; // ES6 

//...

var PropTypes = require('prop-types'); // ES5 with npm
ReactComponent.propTypes = {
   arrayWithShape: PropTypes.arrayOf(PropTypes.shape({
     color: PropTypes.string.isRequired,
     fontSize: PropTypes.number.isRequired,
   })).isRequired,
}

네, 사용하셔야 합니다.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로 Type Checking을 참조하십시오.

그리고 저기 있다...바로 내 코앞에.

리액트 문서 자체:https://facebook.github.io/react/docs/reusable-components.html

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

ES6 속기 Import가 있습니다.참조하시기 바랍니다.읽기 쉽고 타이핑도 용이합니다.

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: [],
  }
}

특정 쉐이프에 대해 같은 프로프타입을 여러 번 정의할 경우 오브젝트의 쉐이프가 바뀌면 코드를 한 곳에서만 변경할 수 있도록 프로프타입을 파일로 추상화하는 것을 좋아합니다.코드 베이스를 건조시키는 데 도움이 됩니다.

예:

// 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)
}

이것은 빈 어레이로부터 보호하는 솔루션이기도 했습니다.

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`)
    }
  }
}

언급URL : https://stackoverflow.com/questions/32325912/react-proptype-array-with-shape