Trích xuất/đọc React propTypes

Question

Tôi muốn kiểm tra trực quan các thành phần React. Người dùng có thể thay đổi đạo cụ của thành phần bằng cách sử dụng một biểu mẫu. Tôi muốn có thể (ví dụ) để hiển thị một số <select> dựa trên React.PropTypes.oneOf(['green', 'blue', 'yellow']).

Khi tôi đọc MyComponent.propTypes, nó trả về một hàm được xác định bởi React. Có cách nào để trích xuất/đọc các loại chống đỡ?

Answer 1

Bạn không thể đọc trực tiếp từ propTypes từ đó, như bạn nói, chúng được định nghĩa như chức năng.

Thay vào đó, bạn có thể xác định các propTypes của mình ở định dạng trung gian, từ đó bạn sẽ tạo ra các mã propTypes tĩnh.

var myPropTypes = { 
    color: { 
    type: 'oneOf', 
    value: ['green', 'blue', 'yellow'], 
    }, 
}; 

function processPropTypes(propTypes) { 
    var output = {}; 
    for (var key in propTypes) { 
    if (propTypes.hasOwnProperty(key)) { 
     // Note that this does not support nested propTypes validation 
     // (arrayOf, objectOf, oneOfType and shape) 
     // You'd have to create special cases for those 
     output[key] = React.PropTypes[propTypes[key].type](propTypes[key].value); 
    } 
    } 
    return output; 
} 

var MyComponent = React.createClass({ 
    propTypes: processPropTypes(myPropTypes), 

    static: { 
    myPropTypes: myPropTypes, 
    }, 
}); 

Sau đó, bạn có thể truy cập vào định dạng propTypes tùy chỉnh của bạn thông qua MyComponent.myPropTypes hoặc element.type.myPropTypes.

Đây là trợ giúp để làm cho quy trình này dễ dàng hơn một chút.

function applyPropTypes(myPropTypes, Component) { 
    Component.propTypes = processPropTypes(myPropTypes); 
    Component.myPropTypes = propTypes; 
} 

applyPropTypes(myPropTypes, MyComponent); 

Answer 2

Có thể thêm một ví dụ mã về những gì bạn đang cố gắng làm vì tôi không hoàn toàn hiểu nhưng tại sao bạn lại truy cập propTypes? PropTypes không chứa các giá trị mà đúng hơn là mong đợi các loại giá trị của bạn nên dành cho các đạo cụ khác nhau được chuyển vào thành phần.

Nếu bạn có một biểu mẫu cho phép bạn thay đổi các đạo cụ, tôi cho rằng bạn đang chuyển trong phần tử vào thành phần sẽ hiển thị thành phần được chọn. Bạn có thể truy cập các đạo cụ này thông qua đối tượng đạo cụ.

Nếu bạn đang cố gắng để xác nhận propTypes rằng có thể có các hình thức khác nhau sau đây có thể được sử dụng:

optionalUnion: React.PropTypes.oneOfType([ 
    React.PropTypes.string, 
    React.PropTypes.number, 
    React.PropTypes.instanceOf(Message) 
]) 

Answer 3

Trên thực tế, nó có thể: kiểm tra axe-prop-types