Higher Order Function을 통한 인수 전달

Question

Im React를 사용하여 'event'외에도 몇 가지 인수를 전달하고자하므로이 함수에 Higher Order 함수를 사용하기로했습니다.

그러나 Higher Order 함수에 전달 된 '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> 
    ); 
}