Question

努力让Semantic UI jQuery组件使用Webpack 2和React来表现。我能够导入所有必需的文件，但是在尝试调用Semantic UI jQuery函数时，我遇到了运行时异常。我见过这些SO文章：

所有这些都与在Webpack上下文中使用jQuery有关，但与运行时异常无关。

我用HMR做了一个简单的试验

import ReactDOM from 'react-dom';
import React from 'react';

import { Accordion, Button, Form, Icon, Header, Container, Segment } from 'semantic-ui-react'

import css from 'semantic_source/semantic.less';
import '../../semantic/dist/semantic'

import $ from 'jQuery';

export default class App extends React.Component {

    componentDidMount() {
        $('.ui.accordion').accordion();
    }

    render() {
        return(
            <Container text>
                <Segment padded raised container>
                {/* ... */}

注意：可以看到完整档案here。

我按如下方式渲染我的应用程序：

import React from 'react';
import ReactDOM from 'react-dom';

import { AppContainer } from 'react-hot-loader'; // AppContainer is a necessary wrapper component for HMR

import App from './components/App.jsx';

const render = Component => {
    ReactDOM.render(
        <AppContainer>
            <Component/>
        </AppContainer>,
        document.getElementById('root')
    );
};

render(App);

// Hot Module Replacement API
if (module.hot) {
    module.hot.accept('./components/App.jsx', () => {
        render(App)
    });
}

尽管有必要的依赖项，但我得到了这个运行时错误：

App.jsx?fbf8:14 Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_8_jQuery___default(...)(...).accordion is not a function
    at App.componentDidMount (eval at ./app/components/App.jsx (bundle.js:721), <anonymous>:80:77)
    at App.proxiedComponentDidMount (eval at ./node_modules/react-transform-hmr/node_modules/react-proxy/modules/createPrototypeProxy.js (bundle.js:10019), <anonymous>:61:40)

我打开了我的开发工具控制台并做了一个简单的测试，以确保所有内容都通过webpack加载：

 $('.ui.accordion').accordion(); // it works

在哪里调用这个jQuery初始化的正确位置？
这可以直接在.jsx文件中完成吗？
componentDidMount是否使用正确的生命周期回调？

使用Webpack 2和React加载语义UI jQuery插件

0 个答案: