ReactJS에서 중첩된 개체의 PropTypes를 검증하려면 어떻게 해야 합니까?

ReactJS에서 중첩된 개체의 PropTypes를 검증하려면 어떻게 해야 합니까?

ReactJS 컴포넌트의 소품으로 데이터 오브젝트를 사용하고 있습니다.

<Field data={data} />

PropTypes 객체 자체를 검증하는 것이 쉽다는 것을 알고 있습니다.

propTypes: {
  data: React.PropTypes.object
}

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

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 버전 15.5.0 현재React.PropTypes패키지로 이동했습니다.prop-types.

import PropTypes from 'prop-types';    

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

상세 정보

네스팅이 한 단계 깊이를 넘어서도 작동한다는 것을 알고 싶었다.이것은 URL 파라미터를 검증할 때 도움이 되었습니다.

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

한다면React.PropTypes.shape원하는 레벨의 타입 체크는 할 수 없습니다.tcomb-timeout을 보세요.

사용자 지정 검증자를 정의하고 tcom-검증을 사용하여 검증을 실행하여 React의 지원을 활용하여 tcomb 라이브러리로 정의된 스키마를 검증할 수 있는 기능을 제공합니다.

문서의 기본 예:

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

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

언급URL : https://stackoverflow.com/questions/26923042/how-do-you-validate-the-proptypes-of-a-nested-object-in-reactjs