是否可以打開自動綁定React.js爲陣營的類模型

Question

根據this blog post功能，範圍以this所有方法React.createClass是沒有內置在陣營的類模型。

默認是否可以打開？

我知道它是可以使用this.someMethod = this.ticksomeMethod.bind(this);招做手工做到這一點，但它可能做到這一點對所有的方法？或者我是否被迫爲bind寫入所有方法？代碼

例子我現在有：

import MessageStore from '../stores/MessageStore.js'; 

export default class Feed extends React.Component { 
    constructor() { 
     this.state = {messages: MessageStore.getAll()} 
     //can I avoid writing this for every single method? 
     this._onChange = this._onChange.bind(this); 
    } 

    _onChange() { 
     this.setState({messages: MessageStore.getAll()}); 
    }; 

    // componentDidMount, componentWillUnmount and render methods ommited 
} 

Answer 1

沒有功能來激活，這是否在目前作出反應。這根本不是一種選擇。

你可以後處理一個類，並自動bind每個函數，但這可能在許多類中是不必要的，並且增加了每個調用的開銷（因爲你的代碼可能有混合的函數需要綁定和一些不）。

您需要決定自動調整是否值得，或者僅在事件回調的上下文中使用bind語法，這是JavaScript所需的典型位置，這是可以接受的。

Answer 2

有一個使用優雅的@decorator語法的新解決方案。 您必須爲Babel啓用JavaScript ES2015 stage-0功能，但在此之後輕而易舉！ 然後，您可以這樣寫：

import autobind from 'autobind-decorator' 
// (...) 
<li onClick={ this.closeFeedback }>Close</li> 
// (...) 
@autobind 
closeFeedback() { 
    this.setState({ closed: true }); 
} 

爲了得到那個工作，你需要安裝一些建庫。具體方法如下：

npm install --save-dev babel-preset-stage-0 
npm install --save-dev babel-plugin-react-transform 
npm install --save-dev babel-plugin-transform-decorators-legacy 
npm install --save-dev autobind-decorator 

或包裹他們都聚集在一個命令：

npm install --save-dev babel-preset-stage-0 babel-plugin-react-transform babel-plugin-transform-decorators-legacy autobind-decorator 

之後更改.babelrc或webpack.config.js取決於你指定通天設置：

query: { 
    presets: ['es2015', 'react', 'stage-0'], 
    plugins: [['transform-decorators-legacy']] 
} 

（請注意，在.babelrc文件中，根節點從查詢對象開始。）

祝你好運，不要忘記進口聲明！

Answer 3

如果您不想或不能使用babel裝飾器語法。你可以定義一個自動綁定功能，並添加一行鍋爐板到你的班級來處理自動綁定。

function autobind(target) { // <-- Define your autobind helper 
 
    for (let prop of Object.getOwnPropertyNames(Object.getPrototypeOf(target))) { 
 
     if (typeof target[prop] !== 'function') { 
 
      continue; 
 
     } 
 
     if (~target[prop].toString().replace(/\s/g, '').search(`^${prop}[(][^)]*[)][{;][\'\"]autobind[\'\"];`)) { 
 
      target[prop] = target[prop].bind(target); 
 
     } 
 
    } 
 
} 
 

 
class Test { 
 
    constructor() { 
 
     autobind(this); // <- single line of boilerplate 
 
     this.message = 'message'; 
 
    } 
 
    method1(){ return this.method2(); } 
 
    method2(){ console.log(this.message);} 
 
    _handleClick() { 'autobind'; // <-- autobind searches for functions with 'autobind' as their first expression. 
 
     console.log(this.message); 
 
    } 
 
} 
 

 
let test = new Test(); 
 
let _handleClick = test._handleClick; 
 
_handleClick();