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

Call a React Function from inside Render

How to Call a Function inside a Render in React/Jsx

React: Cant call a function inside child component



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),但它仍然给出Uncaught ReferenceError: appendAssets is not defined错误

最佳答案

我强烈建议您阅读此answer,以了解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'], [])}}


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

希望这可以帮助 :)

10-05 20:55
查看更多