[reactjs] ReactJS에서 중첩 객체의 PropType을 어떻게 검증합니까?

Program / 글쓴이

ReactJS의 구성 요소에 대한 소품으로 데이터 객체를 사용하고 있습니다.

<Field data={data} />

PropTypes 객체 자체를 쉽게 확인할 수 있다는 것을 알고 있습니다.

propTypes: {
  data: React.PropTypes.object
}

그러나 내부 값을 확인하려면 어떻게해야합니까? 즉. data.id, data.title?

props[propName]: React.PropTypes.number.required // etc...

답변

React.PropTypes.shape속성을 확인 하는 데 사용할 수 있습니다 .

propTypes: {
    data: React.PropTypes.shape({
      id: React.PropTypes.number.isRequired,
      title: React.PropTypes.string
    })
}

최신 정보

@Chris React.PropTypes가 주석에서 지적했듯이 React 버전 15.5.0 은 package로 이동했습니다 prop-types.

import PropTypes from 'prop-types';

propTypes: {
    data: PropTypes.shape({
      id: PropTypes.number.isRequired,
      title: PropTypes.string
    })
}

더 많은 정보

답변

경우 React.PropTypes.shape당신이 원하는 유형 검사의 수준을 제공하지 않습니다, 한 번 봐 가지고 tcomb을-반응 .

tcomb-validation을 사용하여 유효성 검증을 실행하여 사용자 정의 유효성 검증기 를 정의하기위한 React의 지원을 사용 toPropTypes()하여 tcomb 라이브러리로 정의 된 스키마를 유효성 검증 할 수 있는 기능을 제공합니다 .propTypes

문서의 기본 예 :

// define the component props
var MyProps = struct({
  foo: Num,
  bar: subtype(Str, function (s) { return s.length <= 3; }, 'Bar')
});

// a simple component
var MyComponent = React.createClass({

  propTypes: toPropTypes(MyProps), // <--- !

  render: function () {
    return (
      <div>
        <div>Foo is: {this.props.foo}</div>
        <div>Bar is: {this.props.bar}</div>
      </div>
    );
  }
});

답변

중첩은 한 수준 이상의 깊이에서 작동합니다. 이것은 URL 매개 변수를 확인할 때 유용했습니다.

propTypes = {
  match: PropTypes.shape({
    params: PropTypes.shape({
      id: PropTypes.string.isRequired
    })
  })
};

답변

user: React.PropTypes.shap({
    age: (props, propName) => {
       if (!props[propName] > 0 && props[propName] > 100) {
          return new Error(`${propName} must be betwen 1 and 99`)
       }
       return null
    },
})

답변