Question

我提到了几个类似的问题，但我的情况略有不同。

table_2

因此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-- } } }函数内的onClick按钮必须调用sequenceHierarchy。当然，由于appendAssets无法调用它，因为它不是此组件的一部分，我还尝试使用this，但它仍然会出现appendAssets(asset.name)的错误

Answer 1

我强烈建议您阅读此answer以了解this关键字及其在函数内的行为。

引用相关链接答案：

this（又名＆＃34;上下文＆＃34;）是每个函数中的一个特殊关键字，它的值仅取决于函数的调用方式，而不是它是如何/何时/何处定义。与其他变量一样，它不受词法范围的影响。

（请在继续进行之前阅读整个链接的答案）

您可以设置对引用正确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'], [])}}

以上所有方法都可以正常使用。

希望这会有所帮助：）

React：从渲染函数内部调用函数

1 个答案: