Question

我使用React并且除了＆＃39;事件＆＃39;之外我想传递一些参数，所以我决定使用高阶函数。

但是，它并没有认识到这个问题。它被传递给高阶函数。

容器组件

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

通过高阶函数传递参数

1 个答案: