Question

我有以下代码。

let myapp = this;
      myref.on('value', function (snapshot) {
        myapp.updateUsers();
    });

我试图摆脱修复范围问题的代码。我可以将其转换为ES6箭头功能吗？

或者有没有办法访问react root app？

 class App extends Component {}

Answer 1

当你在class内并使用箭头函数时，this将通过词法范围获得它对实例的引用绑定，而不是像普通普通函数那样动态绑定。登记/> 因此，当您想在class中使用某个方法时，可以使用class关键字引用this实例：

someFunction = () => {this.updateUsers()}

简单示例：

＆＃13;

class App extends React.Component {
  
  myfunc1 = (str) => {
    console.log(str);
  }

  myFunc2 = () => {
    this.myfunc1('hi func 2')
  }

  render() {
    return (
      <div>
        <button onClick={this.myFunc2}>Click Me</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

＆＃13;

React - Arrow函数以及this和scope

1 个答案: