反应：从渲染函数调用函数

我已经提到了几个类似的问题，但我的情况有点不同。反应：从渲染函数调用函数

export default class CodeEditor extends React.Component { 
 

 
    appendAssets(asset) { 
 
    console.log(asset) 
 
    this.refs.editor.editor.insert(`player.asset('${asset}')`) 
 
    this.refs.editor.editor.focus() 
 
    } 
 

 

 
    render() { 
 
    function sequenceHierarchy (data, outputArray) { 
 
     level++ 
 
     data.forEach(function (asset){ 
 
     outputArray.push(<li className={`level_${level}`}><button onClick={_ => this.appendAssets(asset.name)}>{asset.name}</button></li>) 
 
     if(asset.children.length) { 
 
      sequenceHierarchy(asset.children, outputArray) 
 
     } 
 
     }) 
 
     level-- 
 
    } 
 
    } 
 

 
}

所以按键的内部sequenceHierarchy功能onClick必须调用appendAssets。当然，因为this将无法调用它，因为它是不是该组件的一部分，我也试图与刚刚appendAssets(asset.name)，它仍然给人Uncaught ReferenceError: appendAssets is not defined

来源

2017-02-21 Deepak Bandi

我强烈建议你一个错误阅读本answer为understaning this关键字及其在函数内部的行为。

从链接答案引用：

这个（又名“上下文”）是每一个功能和其值内一个特殊的关键字只取决于函数是怎么被调用，而不是如何/时/它在哪里被定义。与其他变量不同，它不受词汇范围的影响。

（请，然后再继续阅读整联的答案）

您可以设置为是指纠正this变量的引用。看到这个JSFiddle

let that = this; // assign this reference to variable that. 
function sequenceHierarchy (data, outputArray) { 
    data.forEach((item) => { 
     outputArray.push(
      <li> 
      <button onClick={that.appendAssets.bind(this, item)}> 
       Append {item} 
      </button> 
      </li> 
    );    
    }) 
}

或

您可以使用bind方法来设置正确this，同时调用sequenceHierarchy功能如下。看到这个JSFiddle

{sequenceHierarchy.bind(this, (['1', '2', '3'], []))}

或

您可以使用ES6 arrow function调用sequenceHierarchy功能是这样的。

{() => {sequenceHierarchy(['1', '2', '3'], [])}}

以上所有方法都可以正常工作。

希望这会有所帮助:)

来源

2017-02-21 17:00:48

谢谢Hardik。这帮了我。 –

很高兴帮助:) –

反应：从渲染函数调用函数

回答

相关问题