Question

当我尝试在类函数中使用变量时遇到此错误 Cannot read property 'zoomInIndex' of undefined

如果我有一个函数，它可以正常工作，有人可以帮助我如何在内部函数中使用变量或如何绑定内部函数上下文吗？

class MyContainer extends Component {

    constructor(props) {
        super(props);
        this.testClick = this.testClick.bind(this);
        this.zoomClick = this.zoomClick.bind(this);
        this.testVarible= "this is a test";
    }

    zoomClick(inout) {
    return function(e) {
         console.log(this.testVarible); // this is not working 
      }
    }
    
    
    testClick(){
       console.log(this.testVarible);
    }
    
    
}

如果我使用粗箭头功能，则效果很好

zoomClick = inout => e => {
    console.log(this.testVarible);
}

但是我不想在react组件中使用粗箭头功能，因为我的webpack配置遇到很多问题。

所以我的问题是如何在内部函数中使用变量，或者如何在不使用粗箭头语法的情况下绑定内部函数上下文？

Answer 1

您需要bind function返回的zoomClick()：

zoomClick(inout) {
    return function(e) {
        console.log(this.testVarible); // this is not working
    }.bind(this); // <-- bind(this)
}

返回的匿名function没有this的上下文，因此它给出了错误。由于zoomClick已绑定在构造函数中，因此您只需要bind function(e) { ... }

Answer 2

您可以使用以下两种方法之一将其绑定到类上下文：

returnFunction = returnFunction.bind(this);或function() {}.bind(this)。

class MyContainer extends React.Component {

    constructor(props) {
        super(props);
        this.testClick = this.testClick.bind(this);
        this.zoomClick = this.zoomClick.bind(this);
        this.testVarible = "this is a test";
    }

    zoomClick(inout) {
      let returnFunction = function(e) {
        console.log(this.testVarible);
        return this.testVarible;
      };
      returnFunction = returnFunction.bind(this);
      return returnFunction;
    }
    
    
    testClick(){
       console.log(this.testVarible);
    }
    
    render() {
      return (
        <div>{this.zoomClick(false)(false)}</div>
      );
    }
    
}

ReactDOM.render(
  <MyContainer/>,
  document.getElementById("react")
);

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

Answer 3

我不想在组件中使用粗箭头功能，因为我的webpack配置遇到很多问题

我猜你试图在Babel插件中使用类字段，这给你带来了一些麻烦。

可以在构造函数中使用传统的绑定方法，并且在代码的其他位置使用箭头函数，而不会遇到那些问题。

class MyContainer extends React.Component {

  constructor(props) {
    super(props);
    this.zoomClick = this.zoomClick.bind(this);
    this.testVarible = "this is a test";
  }

  zoomClick() {
    return (e) => {
      console.log(this.testVarible);
    }
  }

  render() {
    return <Button handleClick={this.zoomClick} />
  }

}

function Button({ handleClick }) {
  return <button onClick={handleClick()}>Click</button>
}

ReactDOM.render(
  <MyContainer /> ,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container"></div>

如何在React组件中为内部函数声明变量？

3 个答案: