对话框不是函数 - React

Question

我知道已经有很多关于此的问题，但其中 none 似乎符合我的问题。

我正在使用 JQuery-UI dialog 创建一个 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') -%>

包含有效，但是当我单击 打开对话框 按钮时，控制台显示 dialog is not a function，而如果我在控制台中写入它，它就会显示。

谁能帮帮我？

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

Answer 1

我认为问题出在选择器上

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

尝试从开发者工具检查 $('')。

也许这应该有效

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

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

请检查这个fiddle

对话框不是函数 - React

Dialog is not a function - React

jquery

jquery-ui

reactjs

react-dom