React.js

Question

में एब्स्ट्रक्शन मैं अपने प्रतिक्रिया घटकों के निर्माण में कुछ अमूर्तता का उपयोग करना चाहता हूं। उदाहरण के लिए:

class AbstractButton extends React.Component { 
    render() { 
    return (
     <button 
     onClick={this.props.onClick} 
     className={this.definitions.className}> 
     {this.props.text} 
     </button> 
    } 
} 
class PrimaryButton extends AbstractButton { 
    constructor(options) { 
    super(options); 
    this.definitions = { 
     className: 'btn btn-primary' 
    }; 
    } 
} 
class SuccessButton extends AbstractButton { 
    constructor(options) { 
    super(options); 
    this.definitions = { 
     className: 'btn btn-success' 
    }; 
    } 
} 

मैं props के माध्यम से इन definitions पारित करने के लिए है क्योंकि मुझे पता है कि इन definitions इस मामले --in class कभी नहीं बदल --will नहीं करना चाहती।

क्या यह प्रतिक्रिया में एक विरोधी पैटर्न है? या यह ठीक है?

मेरा प्रश्न this altjs issue को संदर्भित करता है: इस तरह का अमूर्त @connectToStores के साथ संगत नहीं है।

Answer 1

सामान्य शब्दों में, वहाँ गहरी विरासत के बजाय यहां रचना का उपयोग नहीं करने का कोई कारण नहीं बताया गया है:

class Button extends React.Component { 
    render() { 
    return (<button 
      onClick={this.props.onClick} 
      className={this.props.className} 
      > 
      {this.props.text} 
      </button>); 
    } 
    static propTypes = { 
     className: React.PropTypes.string.isRequired, 
     onClick: React.PropTypes.func 
    } 
} 

class PrimaryButton extends React.Component { 
    render() { 
    return <Button {...this.props} className="btn btn-primary" />; 
    } 
} 

यह बस के रूप में आप क्या प्रस्ताव के रूप में काम करती है, लेकिन एक बहुत सरल और के बारे में तर्क करने में आसान है। यह बहुत स्पष्ट करता है कि आपके Button को वास्तव में क्या जानकारी चाहिए।

बार जब आप इस छलांग बनाने के लिए, आप कक्षाएं पूरी तरह खत्म करने और उपयोग कर सकते हैं राज्यविहीन घटकों:

const Button = (props) => (<button 
      onClick={props.onClick} 
      className={props.className} 
      > 
      {props.text} 
      </button>); 
Button.propTypes = { 
     className: React.PropTypes.string.isRequired, 
     onClick: React.PropTypes.func 
}; 

const PrimaryButton = (props) => 
    <Button {...props} className="btn btn-primary" />; 

const SuccessButton = (props) => 
    <Button {...props} className="btn btn-success" />; 

यह और अधिक अनुकूलन लागू करने के लिए प्रतिक्रिया की अनुमति होगी के बाद से अपने घटकों किसी विशेष जीवन चक्र घटना समर्थन या राज्य प्रबंधन की जरूरत नहीं है । अब से कारण भी आसान है क्योंकि अब आप शुद्ध कार्यों के साथ काम कर रहे हैं।

एक तरफ के रूप में, यदि आप बूटस्ट्रैप को लपेटने वाले कुछ प्रतिक्रिया घटक बनाने की कोशिश कर रहे हैं, तो शायद आपको React-Bootstrap पर एक नज़र डालना चाहिए।