访问componentDidMount（）内部的函数

Question

componentDidMount(){ 

    logsAB(a,b){ 
    console.log(a,b); 
    } 
} 

renderListItems(listItem,key){ 
    var x = '1'; 
    var y = '2'; 

    return (
    <li key={key}> 
    <a href="#" className={key} onClick={() => this.logsAB(x,y)}>{blahblah.blah.foo}</a></li> 


) 
} 

我试图调用'componentDidMount'中的函数吗？自从componentDidMount在html加载后触发后，我认为点击处理器应该在加载后触发。从而使该功能可用。

Answer 1

componentDidMount是你的主要Component类的一个函数。里面componentDidMount功能仅作用范围包括该功能，除非你将它们绑定到this范围，具体如下：

componentDidMount(){ 
    this.logsAB = (a, b) => { 
    console.log(a, b); 
    } 
} 

renderListItems(listItem, key){ 
    var x = '1'; 
    var y = '2'; 

    return (
    <li key={key}> 
    <a href="#" className={key} onClick={() => this.logsAB(x, y)}> 
     {blahblah.blah.foo} 
    </a> 
    </li> 
) 
} 

，将工作，但并没有按照正常的反应约定，而做到以下几点：

logsAB(a, b){ 
    console.log(a, b); 
} 

renderListItems(listItem, key){ 
    var x = '1'; 
    var y = '2'; 

    return (
    <li key={key}> 
    <a href="#" className={key} onClick={() => this.logsAB(x, y)}> 
     {blahblah.blah.foo} 
    </a> 
    </li> 
) 
} 

上述代码将函数logsAB放置在组件作用域上，让它通过this.logsAB进行调用。不需要在组件上设置功能。

Answer 2

访问-A-函数里面-的-componentdidmount

你不需要做，如果你想从DOM访问它。

使用这种方法，您试图使其变为私人。

componentDidMount(){ 

    logsAB(a,b){ //private to componentDidMount.Not accessible outside 
    console.log(a,b); 
    } 
} 

如果你想要这样的行为，你可以把它放在外面。

logsAB(a,b){ 
     console.log(a,b); 
     } 

如果你想提供this对象到它，然后bind它this。

constructor(){ 
    this.logsAB = this.logsAB.bind(this); 
}