如何使用带有 React 视图切换的 jQuery 模式？

Question

在 React 方面我有点新手，所以希望有人可以提供帮助。

我已经能够使用 React 创建一个通用的视图切换组件。

var ViewSwitcherContainer = React.createClass({
getInitialState: function() {
    return {
        activeViewName : this.props.views[0].Name
    };
},
selectView: function(name) {
    this.state.activeViewName = name;
    this.forceUpdate();
},
render: function () {
    return  <div>
        <ViewSwitcher views={this.props.views} onViewSelection={this.selectView}/>
        <ViewSwitcherContent views={this.props.views} activeViewName={this.state.activeViewName}/>
    </div>;
}
});

这是一个 JSFiddle 演示... http://jsfiddle.net/paheal/j8Ubc/

但是，当我尝试在模态组件中加载该切换组件时，有时会收到一个
'未捕获错误：不变违规：findComponentRoot(..., .r[3iziq].[1].[ 0].[1])：无法找到元素。这可能意味着 DOM 发生了意外突变（例如被浏览器）。' react 中的错误。

var ModalView = React.createClass({
getInitialState: function () {
    this.viewDefinitions = [
        {DisplayName:'View A', Name:'viewA', View:ViewA},
        {DisplayName:'View B', Name:'viewB', View:ViewB}
    ];
    return {};
},
componentDidMount: function () {
        $("#" + this.props.modalId ).dialog({
            autoOpen: false,
            height: 400,
            width: 400,
            modal: true,
            draggable: false,
            resizable: false
        });
},
render: function () {
    return  <div id={this.props.modalId} title={this.props.modalId}>
            <ViewSwitcherContainer views={this.viewDefinitions}/>
    </div>;
}
});

这是一个 JSFiddle 演示... http://jsfiddle.net/paheal/j8Ubc/7/

我错过了什么？是我的模态组件还是视图切换组件的问题？

Answer 1

我实际上找出了问题所在。似乎 jQueryUI 中的对话框功能通过为对话框及其标题栏动态创建 div 来添加到 DOM。

根据事情的时间安排，这可能会在 React 进行协调时导致问题。

为了解决这个问题，我实现了一个模态对话框的 Reactified 版本。