Pass aurguments zu einer Callback-Funktion

Question

Ich habe eine Stateless Funktionskomponente React. Ich würde gerne die Callback-Funktion erweitern.

Ich habe in data.item.id zum invokeFunction kann

const MyComponent = ({ data, invokeFunction }) => (
    <div> 
     <a className="pdf-name" onClick={invokeFunction}>{data.item.extension.nameCode}</a> 
</div> 
) 


hydratedata(arg){ 
console.log("arg", this is the data that is hydrating); 
} 

Answer 1

Sie es einfach über einen anonymen Callback-Funktion aufrufen zu übergeben, zB:

const MyComponent = ({ data, invokeFunction }) => (
    <div> 
     <a className="pdf-name" onClick={() => invokeFunction(data.item)}>{data.item.extension.nameCode}</a> 
    </div> 
); 

Oder wie @AndyRay vorgeschlagen, Sie könnten auch Bindung verwenden

const MyComponent = ({ data, invokeFunction }) => (
    <div> 
     <a className="pdf-name" onClick={invokeFunction.bind(null, data.item)}>{data.item.extension.nameCode}</a> 
    </div> 
); 

Binding erstellt eine Funktion mit voreingestellter Ausführung Kontext und in diesem Fall das erste Argument, also muss es nur die Funktion aufrufen

Answer 2

Der Kontext von invokeFunction wird in der Komponente vorhanden sein, in der Sie es als Prop zu MyComponent übergeben.

Um eine beliebige Anzahl von Argumenten an eine Callback-Funktion zu übergeben, können Sie eine Wrapper-Funktion erstellen, die die Callback-Prop mit (in MyComponents Umgebung/Closure vorhandenen) Werten als Argumente aufruft.

const MyComponent = ({ data, invokeFunction }) => { 
    return (
    <div> 
     <a 
     className="pdf-name" 
     onClick={wrapperFuncForArgs} 
     > 
     {data.item.extension.nameCode} 
     </a> 
    </div> 
); 

    function wrapperFuncForArgs() { 
    invokeFunction(data.item.id); 
    } 
};