通過高階函數傳遞參數

Question

即時通訊使用React，除了'事件'之外，我想傳遞一些參數，所以我決定使用高階函數。

但是，它不識別傳遞給高階函數的'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無關緊要，這是一個與其自己的範圍不同的函數。

你需要寫

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> 
    ); 
}