jquery - 对话框不是一个函数 - React

Question

我知道已经有很多关于此的问题，但似乎没有一个与我的问题相符。

我正在使用 JQuery-UI 对话框创建一个 React 组件它看起来像这样:

var VehiclePlantDialog = React.createClass({
    handleSubmit: function(e) {
      e.preventDefault();
      this.props.closeDialog();
    },
    render: function () {
        return (
            <div>
                <form>
                    <input ref="inputText" />
                    <input type="submit" />
                    <button onClick={this.props.closeDialog}>Cancel</button>
                </form>
            </div>
        );
    }
});

var VehiclePlants = React.createClass({

    openDialog: function (e) {
        e.preventDefault();

        var myDialog = $('<div>').dialog({
            title: 'Dialog example',
            width: 400,
            close: function (e) {
                React.unmountComponentAtNode(myDialog);
                $(this).remove();
            }
        });

        var closeDialog = function (e) {
            e.preventDefault();
            myDialog.dialog('close');
        };
        $(document).ready(function () {
            ReactDOM.renderComponent(<VehiclePlantDialog closeDialog={closeDialog} />, myDialog);
        });
    },
    render: function () {
        return (
            <div>
                    <button onClick={this.openDialog}>Open dialog</button>
            </div>
        );
    }
});

有了这个，在我的 ejs 文件中包含 jquery

<% script('/scripts/jquery.js') -%>
<% script('/scripts/jquery-ui.min.js') -%>

包含有效，但是，当我单击打开对话框按钮时，控制台显示对话框不是函数，而如果我将其写入控制台，它就会显示。

谁能帮帮我？

注意:我正在使用 Bower、Gulp、React、ReactDom、jquery，jquery-ui

Answer 1

我认为问题出在选择器

$('<div>').dialog({

尝试从开发人员工具中检查 $('')。

也许这应该有效

$("<div>My div content</div>").dialog({

编辑是的，你是对的。但是你的代码没有问题。它已经运行良好。

请检查此fiddle