คุณจะตรวจสอบ PropTypes ของวัตถุที่ซ้อนกันใน ReactJS ได้อย่างไร

ฉันใช้วัตถุข้อมูลเป็นอุปกรณ์ประกอบฉากของฉันสำหรับส่วนประกอบใน 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 รุ่น 15.5.0 ได้ย้ายไปแพคเกจReact.PropTypesprop-types

import PropTypes from 'prop-types';    

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

ข้อมูลเพิ่มเติม

ถ้าReact.PropTypes.shapeไม่ให้ระดับของการตรวจสอบชนิดที่คุณต้องการมีลักษณะที่tcomb ทำปฏิกิริยา

มันมีtoPropTypes()ฟังก์ชั่นที่ช่วยให้คุณตรวจสอบสคีมากำหนดด้วยtcombห้องสมุดโดยการใช้ตอบสนองการสนับสนุนสำหรับการกำหนดที่กำหนดเองpropTypesvalidatorsทำงานการตรวจสอบโดยใช้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>
    );
  }    
});

ต้องการที่จะทราบว่าการทำรังทำงานเกินกว่าระดับหนึ่ง สิ่งนี้มีประโยชน์สำหรับฉันเมื่อตรวจสอบพารามิเตอร์ 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
    },
})