将此绑定到 React 中的嵌套函数

IT技术 javascript reactjs
2021-04-27 08:48:44

this处理嵌套函数时如何绑定到 React 组件？

这是一个骨架示例。function2嵌套的原因是这样您就可以访问中定义的变量function1

class View extends Component{

    constructor(props){
        this.function1 = this.function1.bind(this);

        this.state = {
            a = null;
        }
    }

    componentDidMount(){
        function1();
    }

    function1(){
        console.log(this); //will show the component correctly

        var param1 = 10;

        //call a second function that's defined inside the first function
        function2();

        function function2(){
            console.log(this); //undefined

            var a = param1*2;

            this.setState({ a : a}); //won't work because this is undefined
        }
    }

    render(){
        return(
            <div>
                <p> Hello </p>
            </div>
        )
    }
}
2个回答

为什么不直接使用箭头函数？这将确保this正确引用。我假设你可以使用ES6.

function1 = () => {
    console.log(this);

    var param1 = 10;

    const function2 = () => {
      console.log(this);

      var a = param1*2;

      this.setState({ a }); 
    }

    function2(); // inkove the function
}

或者，如果您只想使用ES5，那么这也可以

function1() {
    console.log(this);

    var param1 = 10;

    function function2() {
      console.log(this);

      var a = param1*2;

      this.setState({ a }); 
    }

    function2.bind(this)() // to invoke the function
}

您可以保留this对该变量的引用并在其中使用该变量function2。

function1(){
    var self = this;
    .....
    function function2(){
        console.log(self);
        ....
    } 
}

您还可以使用apply,bind或设置该函数的上下文call。例如：

function2.call(this);
其它你可能感兴趣的问题
上一篇ReactJS setState 仅在嵌套在 setState 中时才有效 下一篇松散的黄铜加热器块