2016-02-22 3 views
9

मैं रिएक्ट रेडक्स का उपयोग कर सरल एप्लिकेशन बना रहा हूं। मैं अपने घटक में कुछ तरीकों सुई डेकोरेटर का उपयोग करना चाहते .. मैं अन्य परियोजनाओं में समान कोड देखा:मैं एक रेक्ट रेडक्स एप्लिकेशन में सजावट का उपयोग कैसे कर सकता हूं?

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 


@creatable 
export default class BookDetails extends Component { 

    render() { 
    console.log(this.props); 
    if (!this.props.Activebook) { 
     return <div> please select book</div> 
    } 
    return (
     <div>{this.props.Activebook.title}</div> 
    ); 
    } 
} 


function creatable() { 
    return Create => { 
    @connect(state=>({Activebook : state.ActiveBook})) 
    class MyDecorator extends Component { 
    render() { 
     console.log('>>>>>>>>>>>>>'); 
    console.log(this.props); 
     console.log('>>>>>>>>>>>>>'); 
     return (
     <div> 
      <Create 
       {...this.props} 
      /> 
     </div> 
     ) 
    } 

    } 
    return MyDecorator; 
    } 
} 

दुर्भाग्य से ऊपर कोड काम नहीं कर रहा। क्यूं कर?

+1

"काम नहीं कर रहा" परिभाषित करें? – loganfsmyth

+0

जब मैं इस कोड का परीक्षण कर रहा था तो यह मुझे @ creatable के पास त्रुटि दिखा रहा था बस मुझे उपर्युक्त उदाहरण उदाहरण चाहिए .. – user3126894

+0

@ user3126894 अगर आपको कोई त्रुटि मिल रही है, तो इसे समस्या के विवरण में प्रदान किया जाना चाहिए। – lux

उत्तर

3

बेबेल 6 es2015 प्रीसेट के साथ सजावटी का समर्थन नहीं करता है, न ही stage-0 प्रीसेट के साथ। आप सज्जाकार सक्षम करने के लिए babel-plugin-transform-decorators-legacy प्लगइन जोड़ना होगा:

$ npm install --save-dev babel-plugin-transform-decorators-legacy 

और .babelrc में अपने प्लग-इन करने के लिए जोड़ें:

{ 
    "plugins": [ 
    "transform-decorators-legacy", 
    ... 
    ] 
} 

यह सबसे आसान तरीका है मैं के बारे में पता डेकोरेटर समर्थन प्राप्त करने के लिए है। वे डिफ़ॉल्ट रूप से बेबेल में शामिल नहीं हैं क्योंकि वास्तव में उन्हें अभी तक मानकीकृत नहीं किया गया है।

+0

ओह !! वह मेरे पैकेज में गायब था। जेसन। मुझे इसके साथ प्रयास करने दो। धन्यवाद – user3126894

10

कृपया ध्यान दें कि हम घटकों को जोड़ने के लिए सजावटी का उपयोग करने की अनुशंसा नहीं करते हैं। आप उन्हें आधिकारिक दस्तावेज़ या उदाहरणों में कहीं भी नहीं पाएंगे।

सिर्फ इसलिए कि कुछ समुदाय उदाहरणों का उपयोग उन्हें मतलब यह नहीं है कि यह एक अच्छा विचार है: कल्पना अभी भी बदल रहा है, टूलींग समर्थन परतदार है, और स्पष्ट, आप connect() के लिए सज्जाकार की जरूरत नहीं है, क्योंकि वे सरल कार्य करने के लिए desugar कहता है।

उदाहरण के लिए

, बजाय

@connect(mapStateToProps) 
class MyComponent extends Component {} 

आप

class MyComponent extends Component {} 
MyComponent = connect(mapStateToProps)(MyComponent) 

लिखना चाहिए इस तरह से आप के बारे में उन्हें तोड़ने जब तक प्रस्ताव भाषा का हिस्सा है चिंता करने की ज़रूरत नहीं होगी।

मैं आपको official Redux examples में उपयोग किए जाने वाले सम्मेलनों से चिपकने की सलाह देता हूं और प्रयोगात्मक वाक्यविन्यास एक्सटेंशन को अपनाने के बारे में बहुत सावधान रहूंगा।

संबंधित मुद्दे

 संबंधित मुद्दे