Reagieren: Rufen Sie eine Funktion von innen Render-Funktion

Question

Ich habe auf einige ähnliche Fragen verwiesen, aber ich habe eine Situation wenig anders.

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

 
}

So ist die onClick der Taste innerhalb sequenceHierarchy Funktion hat appendAssets zu nennen. Natürlich, da this nicht in der Lage wäre, es zu nennen, da es nicht der Teil dieser Komponente ist, habe ich auch versucht, mit nur appendAssets(asset.name), noch gibt es einen Fehler von Uncaught ReferenceError: appendAssets is not defined

Answer 1

Ich rate Ihnen diese answer für understaning lesen this Schlüsselwort und sein Verhalten innerhalb der Funktion.

aus der verknüpften Antwort Zitiert:

diesen (auch bekannt als „der Kontext“) ist ein spezielles Schlüsselwort in jeder Funktion und ihren Wert hängt nur ab, wie die Funktion aufgerufen wurde, nicht wie/wann/wo es definiert wurde. Der lexikalische Geltungsbereich hat keine Auswirkungen auf andere Variablen.

(Bitte lesen Sie verknüpfte Antwort ganz, bevor Sie fortfahren)

Sie entweder einen Verweis auf die Variable kann die this korrigieren bezieht. Sehen Sie diese 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> 
    );    
    }) 
} 

oder

Sie bind Methode können richtig this setzen, während Aufruf sequenceHierarchy Funktion wie folgt. Sehen Sie diese JSFiddle

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

oder

Sie ES6 arrow function verwenden können sequenceHierarchy Funktion wie diese aufzurufen.

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

Alle oben genannten Methoden funktionieren einwandfrei.

Hoffe das hilft :)