React：内部のレンダリング関数から関数を呼び出す

Question

私は同様の質問のカップルを参照しましたが、状況は少し異なります。

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

Answer 1

のエラーを与える私は強くunderstaningこのanswerを読み取ることをアドバイスthisキーワードとその動作は関数内にあります。この（別名「文脈」）は、各関数内の特別なキーワードであるとその値がどのようにのみ/とき/関数が呼ばれた方法によって異なり、ない

：リンク答から引用

それが定義された場所。他の変数と同様に、レキシカルスコープの影響を受けません。

（さらに進む前に、全体のリンクの答えをお読みください）

あなたはthisを修正するために参照する変数への参照を設定することができます。あなたは次のようにsequenceHierarchy機能の呼び出し中に、this正しいを設定するbindメソッドを使用することができ、この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> 
    );    
    }) 
} 

または

を参照してください。あなたはこのようsequenceHierarchy機能を呼び出すためにES6 arrow functionを使用することができ、このJSFiddle

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

または

を参照してください。

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

上記の方法はすべて正常に動作します。

希望します。