PropTypes trên các thành phần bậc cao hơn

Question

Có cách nào cho các PropTypes từ một thành phần bên trong một thành phần bậc cao hơn để trỏ trở lại nơi chúng được tạo ra không?

Đây là một mẫu nhỏ nhưng nếu có được nhiều EnhancedButtons suốt một ứng dụng trong các tập tin riêng biệt này sẽ rất khó để gỡ lỗi.

Vì thành phần thứ tự cao hơn được lý tưởng để sử dụng lại, chúng tôi có thể không bao giờ biết vị trí của thành phần thiếu phương thức handleClick. Phương thức render của _EnhancedButton là một biến cho bất kỳ Component nào mà chúng ta muốn nâng cao.

Có cách nào để làm cho các PropTypes rõ ràng hơn khi chúng được tạo ra như FinalButton được chèn vào và là một thể hiện của _EnhancedButton và thiếu trình điều khiển prop?

https://jsfiddle.net/kriscoulson/sh2b8vys/3/

var Button = (props) => (
 
\t <button onClick={() => props.handleClick() }> 
 
\t \t Submit 
 
\t </button> 
 
); 
 

 
Button.propTypes = { 
 
\t handleClick: React.PropTypes.func.isRequired 
 
} 
 

 
const EnhanceButton = Component => class _EnhancedButton extends React.Component { 
 
\t render() { 
 
    \t return (<Component { ...this.props }>{this.props.children}</Component>); 
 
    } 
 
} 
 

 
const FinalButton = EnhanceButton(Button); 
 

 
ReactDOM.render(
 
    <FinalButton />, 
 
    document.getElementById('container') 
 
);

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script> 
 

 
<div id="container"> 
 
    <!-- This element's contents will be replaced with your component. --> 
 
</div>

Answer 1

Tên FinalButton trong ví dụ của bạn sẽ không được biết đến phản ứng vì đó chỉ là tên biến địa phương của bạn, nhưng chúng tôi thay đổi tên của các thành phần dẫn đến bất cứ điều gì bạn muốn. Ở đây tôi sử dụng "Final" trước bất kỳ tên gốc nào.

Ngoài ra, chúng tôi có thể sao chép/hợp nhất các loại chống đỡ qua phần tử mới.

function EnhanceButton(Component) { 
    class _EnhancedButton extends React.Component { 
     static displayName = 'Final' + (Component.displayName || Component.name || 'Component'); 

     render() { 
      return (
       <Component { ...this.props }>{this.props.children}</Component> 
      ); 
     } 
    } 
    _EnhancedButton.propTypes = Component.propTypes; 

    return _EnhancedButton; 
} 

Điều này cho phép: Cảnh báo: Không propType: Bắt buộc prop handleClick không được quy định tại Button. Kiểm tra phương thức hiển thị của FinalButton.

Fiddle: https://jsfiddle.net/luggage66/qawhfLqb/

Answer 2

Trong khi câu trả lời gửi hành lý của hoạt động rất tốt, khác, có lẽ sạch hơn, thay thế là để khai báo proptypes của bạn như tĩnh và tuyên bố họ bên trong cơ thể của các thành phần.

const EnhanceButton = Component => class extends React.Component { 
    static propTypes = { 
    children: PropTypes.node, 
    } 
    static defaultProps = { 
    children: false, 
    } 
    render() { 
    return (
     <Component 
     { ...this.props } 
     > 
     {this.props.children} 
     </Component> 
    ); 
    } 
}