ReactJs Global Helper İşlevleri

Question

Yayım: Çok fazla sayıda küçük yardımcı işlevlerim var, bunlar mutlaka bir bileşenin içinde yaşamak zorunda değiller (veya belki de bu bileşeni çok fazla kodla şişiriyorlar). taraf sadece bunların hepsinin sadece bileşenlerin arayabileceği bir dizi küresel fonksiyon olmasına izin vermek istiyor. Gerçekten iyi ReactJs kodu yapmak istiyorum.

Soru: Reactjs'deki küresel yardım işlevleri açısından en iyi uygulamalar nelerdir? Onları bir çeşit bileşene zorlamalı mıyım yoksa sadece diğer bileşenlere mi itmeliyim?

Temel Örnek:

function helperfunction1(a, b) { 
    //does some work 
    return someValue; 
} 

function helperfunction2(c, d) { 
    //does some work 
    return someOtherValue; 
} 

function helperfunction3(e, f) { 
    //does some work 
    return anotherValue; 
} 

function helperfunction4(a, c) { 
    //does some work 
    return someValueAgain; 
} 


var SomeComponent = 
    React.createClass({ 

     //Has bunch of methods 

     //Uses some helper functions 

     render: function() { 

     } 

    }); 

var SomeOtherComponent = 
    React.createClass({ 

     //Has bunch of methods 

     //Uses some helper functions 

     render: function() { 

     } 

    }); 

Answer 1

Sen modulejs kullanabilirsiniz. veya kullanabilirsiniz Katmalar (https://facebook.github.io/react/docs/reusable-components.html#mixins) Mixins için

Örnek: https://jsfiddle.net/q88yzups/1/

var MyCommonFunc = { 
    helperFunction1: function() { 
     alert('herper function1'); 
    }, 
    doSomething: function(){ 
     alert('dosomething'); 
    } 
} 

var Hello = React.createClass({ 
    mixins: [MyCommonFunc], 
    render: function() { 
     this.doSomething(); 
     return <div onClick={this.helperFunction1}>Hello {this.props.name} </div>; 
    } 
}); 

React.render(<Hello name="World" />, document.getElementById('container')); 

Answer 2

Bunun için WebPack veya Browserify gibi bir modül-donatılacak aracı kullanabilirsiniz. Yeniden kullanılabilir işlevlerinizi bir CommonJS modülüne yerleştirin.

Katmalar kullanmayın, muhtemelen orada ES6 sözdizimi ile tepki de katmalar bildirmek için standart bir yolu var ve muhtemelen katmalar standardize edecek ES7 beklemeyi tercih olarak Tepki sonraki sürümlerinde kaldırılacaktır. React yaşam döngüsünün yöntemlerini kullanmıyorsa, yeniden kullanılabilir kodunuzu React ile eşleştirmenin bir anlamı yoktur.

Answer 3

Sadece başka bir seçenek, ayrı bir modülde ayrılmak istemiyorsanız, alt bileşeninizde aşağıdaki gibi özel bir yöntem oluşturabilir ve bu bileşen içinde serbestçe kullanabilirsiniz ya da sahne bileşenleri aracılığıyla alt bileşenlere geçebilirsiniz ..

var YourComponent = React.createClass({ 

    globalConfig: function() { 
     return { 
      testFunc: function() { 
       console.log('testing...'); 
      }, 
     }; 
    }(), 

    ...... 
    render: function() { 
     this.globalConfig.testFunc(); // use directly 

     <ChildComponent globalConfig={this.globalConfig.testFunc} /> // pass to child 
    ..... 

Tüm denenmemiş, ama bu fikir ...