Question

我在npm安装了ekkoLightbox。

在我的webpack中，我有以下条目：

optimization: {
    splitChunks: {
        cacheGroups: {
            vendor: {
                test: /[\\/]node_modules[\\/]/,
                name: "vendor",
                chunks: "all"
            }
        }
    }
}

将所有node_modules打包到vendor.js文件中。

我还有一个main.js文件：

import $ from "jquery";
import "bootstrap";
import 'ekko-lightbox';

window.jQuery = $;
window.$ = $;

index.js使用React app：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App/>, document.getElementById('root'));

使用ekkoLightbox插件的组件（简化）：

render方法：

render() {
    return <Grid>
        <Row>
            <Col lg={12}>
                <div dangerouslySetInnerHTML={{__html: article.content}} onClick={this.onClick}/>
            </Col>
        </Row>
    </Grid>;
}

onClick方法（从render调用）：

onClick = (e) => {
    let $el = $(e.target);

    if ($el.is('img:not(.not-gallery)')) {
        let $img = $el.clone();
        let $a = $('<a href="' + $el.attr('src') + '" data-toggle="lightbox"/>').append($img);
        console.log($a);
        $a.ekkoLightbox();
    }
}

点击图片元素后，我收到以下错误消息：

Uncaught TypeError: $a.ekkoLightbox is not a function
    at ArticlePage._this.onClick (ArticlePage.js:63)
    at HTMLUnknownElement.callCallback (react-dom.development.js:542)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
    at Object.invokeGuardedCallback (react-dom.development.js:438)
    at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:452)
    at executeDispatch (react-dom.development.js:836)
    at executeDispatchesInOrder (react-dom.development.js:858)
    at executeDispatchesAndRelease (react-dom.development.js:956)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:967)
    at Array.forEach (<anonymous>)

我做错了什么？

在react组件中使用ekkoLigthbox

0 个答案: