コールバック関数にaurgumentsを渡す

Question

私はReact stateless機能コンポーネントを持っています。私は、コールバック関数に補完を渡したいと思います。

私はあなただけ例えば、匿名関数コールバックを通してそれを呼び出すことができますinvokeFunction

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

にdata.item.idに渡す必要があり：、

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

それとも@AndyRayによって示唆されているようにバインディングを使用することもできます。

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

バインディングは、プリセット実行で関数を作成しますコンテキストおよびこの場合は最初の引数であるため、関数を呼び出すだけで済みます。

Answer 2

invokeFunctionのコンテキストは、MyComponentの小道具として渡したコンポーネントに存在します。

コールバック関数に任意の数の引数を渡すには、（MyComponentの環境/クロージャに存在する）値を引数としてコールバック小道具を呼び出すラッパー関数を作成できます。

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

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