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/

然而，当我尝试在模态组件中加载该切换组件时，我有时会得到一个＆＃39;未捕获的错误：不变违例：findComponentRoot（...，。r [3iziq]。[ 1]。[0]。[1]）：无法找到元素。这可能意味着DOM意外地发生了变异（例如，通过浏览器）。＆＃39; 来自反应的错误。

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版本。

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

1 个答案: