Có thực hành tốt để tạo các thành phần cơ sở và sau đó mở rộng chúng trong React không?

Question

Tôi chỉ đang học React và tôi đang viết các thành phần sử dụng cú pháp ES7. Ý tưởng của tôi là tạo ra một thành phần cơ bản sẽ chứa một số phương thức mà tôi muốn tất cả các thành phần có nguồn gốc có. Ví dụ, tôi muốn thực hiện valueLink without the mixin, cho ràng buộc hai chiều trong tất cả các thành phần của tôi. Đây là ý tưởng của tôi:

class MyComponent extends React.Component { 

    bindTwoWay(name) { 
     return { 
      value: this.state[name], 
      requestChange: (value) => { 
       this.setState({[name]: value}) 
      } 
     } 
    }; 
} 

 

class TextBox extends MyComponent { 
    state = { 
     val: '' 
    }; 

    render() { 
     return (<div> 
      <input valueLink={this.bindTwoWay('val')}/> 
      <div>You typed: {this.state.val}</div> 
     </div>) 
    } 
} 

Và nó hoạt động tốt. Tuy nhiên, tôi không thể tìm thấy nhiều thông tin về phương pháp này. Nó không phải về valueLink, đó chỉ là một ví dụ. Ý tưởng là có một số phương thức trong một thành phần cơ sở và sau đó mở rộng thành phần đó để các thành phần có nguồn gốc có tất cả các phương thức đó, giống như cách OOP thông thường. Vì vậy, tôi chỉ muốn biết nếu điều này là hoàn toàn tốt đẹp hoặc có một số sai sót mà tôi không biết. Cảm ơn.

Answer 1

này là hoàn toàn tốt, nó chỉ là thừa kế cơ bản. Thông báo trước về việc sử dụng thừa kế để thay thế mixin là không có nhiều thừa kế, vì vậy bạn không thể cung cấp cho các tính năng TextBox của nhiều lớp cơ sở như khi bạn cung cấp cho nó nhiều mixin. Để giải quyết vấn đề này, bạn có thể sử dụng component composition. Trong trường hợp thành phần của bạn sẽ không làm việc trực tiếp như bạn đã xác định trong ví dụ nhưng có một giải pháp cho việc này.

Trước tiên, bạn cần phải xác định một thành phần sáng tác

export default (ComposedComponent) => { 
    class MyComponent extends React.Component { 
    constructor(props, state) { 
     super(props, state); 
     this.state = { 
     val: '' 
     }; 
    } 
    bindTwoWay(name) { 
     return { 
     value: this.state[name], 
     requestChange: (value) => { 
      this.setState({[name]: value}) 
     } 
     }; 
    } 

    render() { 
     return (
     <ComposedComponent 
      {...this.props} 
      {...this.state} 
      bindTwoWay={this.bindTwoWay.bind(this)} 
     /> 
     } 
    } 
    } 

    return MyComponent 
} 

Và sau đó bạn xác định thành phần của bạn, nơi bạn cần một số đặc điểm chung

import compose from 'path-to-composer'; 

class TextBox extends React.Component { 
    render() { 
    return (
     <div> 
     <input valueLink={this.props.bindTwoWay('val')}/> 
     <div>You typed: {this.props.val}</div> 
     </div> 
    ) 
    } 
} 

export default compose(TextBox) 

tôi đã không kiểm tra này, nhưng nó cũng làm việc.