高次関数による引数の受け渡し

Question

私はReactを使っていますが、私は 'event'に加えていくつかの引数を渡したいので、これに対して高次関数を使うことにしました。

しかし、高次関数に渡された 'id'は認識されません。

コンテナコンポーネント

... 
const mapDispatchToProps = (dispatch) => { 
    return({ 
     dispatchSelectElement : function(e){ 
      console.log(id); // Error: id is not defined. 
      dispatch(selectElement(id, type, pos)); 
     }, 
     ... 
    }); 
}; 
const C_ElementParent = connect(mapStateToProps, mapDispatchToProps)(ElementParent); 

コンテナコンポーネント&以下のプレゼンテーションコンポーネントの間に座っている別のコンポーネントがあります。 console.logで報告されているように、小道具はうまく通過しています。上記のdispatchSelectElementは、eventProps以下に渡されます。

プレゼンテーションコンポーネント

const Element = ({ id, colorName, eleProps, eventProps }) => { 
    let handleDispatchSelectEle = function(id){ 
     return eventProps.dispatchSelectElement; 
    } 
    return(
     <g id = { id }> 
      <path onMouseDown = { eleProps.get("mouseDown") && handleDispatchSelectEle(id)} /> 
     </g> 
    ); 
}; 

Answer 1

スコープidが（それが使用されていない）あなたhandleDispatchSelectEle関数の体内のみ利用可能であろうことを意味し、字句です。関数がeventProps.dispatchSelectElementを返すことは重要ではありません。それはそれ自身のスコープを持つ別個の関数です。

あなたはどの関数にIDを渡している

function mapDispatchToProps(dispatch) { 
    return { 
     handleDispatchSelectElement: (id) => (e) => { 
//         ^from here on, `id` is in scope 
      console.log(id); // Error: id is not defined. 
      dispatch(selectElement(id, type, pos)); 
     }, 
     … 
    }; 
} 

function Element({ id, colorName, eleProps, eventProps }) { 
    // pass the id here, to create a function: 
    const dispatchSelectEle = eventProps.handleDispatchSelectElement(id); 
    return (
     <g id={id}> 
      <path onMouseDown={ eleProps.get("mouseDown") && dispatchSelectEle } /> 
     </g> 
    ); 
}