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

Posted 2023-02-21

【中文标题】React：从内部渲染函数调用一个函数

【英文标题】：React : Call a function from inside render function

【发布时间】：2017-07-11 08:49:40

【问题描述】：

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

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--
    
  

所以sequenceHierarchy函数内部的按钮onClick必须调用appendAssets。当然，由于this 不能调用它，因为它不是该组件的一部分，所以我也尝试了只使用appendAssets(asset.name)，但它仍然给出Uncaught ReferenceError: appendAssets is not defined 的错误

【参考方案1】：

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

引用链接的答案：

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'], []) 

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

希望这会有所帮助:)

【讨论】：

谢谢哈迪克。这帮助了我。

很高兴它有帮助:)