Làm thế nào để bạn xác nhận PropTypes của một đối tượng lồng nhau trong ReactJS?

Tôi đang sử dụng một đối tượng dữ liệu làm đạo cụ cho một thành phần trong ReactJS.

<Field data={data} />

Tôi biết thật dễ dàng để xác thực chính đối tượng PropTypes:

propTypes: {
  data: React.PropTypes.object
}

Nhưng nếu tôi muốn xác nhận các giá trị bên trong thì sao? I E. data.id, data.title?

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

Bạn có thể sử dụng React.PropTypes.shapeđể xác nhận các thuộc tính:

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

Cập nhật

Như @Chris đã chỉ ra trong các bình luận, kể từ phiên bản React 15.5.0 React.PropTypesđã chuyển sang gói prop-types.

import PropTypes from 'prop-types';    

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

Thêm thông tin

Nếu React.PropTypes.shapekhông cung cấp cho bạn mức độ kiểm tra loại bạn muốn, hãy xem phản ứng tcomb .

Nó cung cấp một toPropTypes()hàm cho phép bạn xác thực một lược đồ được xác định với thư viện tcomb bằng cách sử dụng hỗ trợ của React để xác định các propTypestrình xác nhận tùy chỉnh , chạy xác thực bằng cách sử dụng xác thực tcomb .

Ví dụ cơ bản từ các tài liệu của nó :

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

Muốn lưu ý rằng việc làm tổ vượt quá một cấp độ sâu. Điều này hữu ích cho tôi khi xác thực các thông số 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
    },
})