ReactJs Global Helper Functions

Question

Vấn đề: Tôi có rất nhiều chức năng trợ giúp nhỏ mà không cần thiết phải sống trong một thành phần (hoặc có thể nhưng chúng sẽ làm cho thành phần đó cồng kềnh với nhiều mã). bên chỉ muốn để cho tất cả những người chỉ là một số loại chức năng toàn cầu mà các thành phần có thể gọi. Tôi thực sự muốn làm cho mã ReactJs tốt.

Câu hỏi: Các phương pháp hay nhất về chức năng trợ giúp toàn cầu trong Reactjs là gì? Tôi có nên buộc chúng vào một số loại thành phần hoặc chỉ xô chúng vào các thành phần khác không?

cơ bản Ví dụ:

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

Bạn có thể sử dụng modulejs. hoặc bạn có thể sử dụng mixins (https://facebook.github.io/react/docs/reusable-components.html#mixins)

mẫu cho mixins: 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

Bạn có thể sử dụng một công cụ mô-đun-bundling như Webpack hoặc Browserify cho điều đó. Đặt các chức năng có thể tái sử dụng của bạn trong mô-đun CommonJS.

Không sử dụng Mixins, chúng có thể sẽ không được dùng trong các phiên bản tiếp theo của React vì không có cách tiêu chuẩn nào để khai báo mixin trong cú pháp React with ES6 và họ muốn đợi ES7. Và không có điểm nào liên kết mã tái sử dụng của bạn với React trừ khi nó sử dụng các phương thức của vòng đời React.

Answer 3

Chỉ cần một tùy chọn khác, nếu bạn không muốn tách thành một mô-đun riêng biệt, bạn có thể tạo một phương thức riêng trong thành phần cha của bạn như dưới đây và sử dụng tự do trong thành phần này hoặc chuyển đến các thành phần con thông qua đạo cụ ..

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ất cả chưa được kiểm tra, nhưng đó là ý tưởng ...