I'm a bit of a novice when it comes to React, so hopefully someone can help.

I've been able to create a generic view switching component using 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>;
}
});

Here is a JSFiddle demonstration... http://jsfiddle.net/paheal/j8Ubc/

However when I try to load that switching component in a modal component I sometimes get an
'Uncaught Error: Invariant Violation: findComponentRoot(..., .r[3iziq].[1].[0].[1]): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g. by the browser).' error from 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>;
}
});

Here is a JSFiddle demonstration... http://jsfiddle.net/paheal/j8Ubc/7/

What am I missing? Is the problem in my modal component or in the view switching components?

有帮助吗?

解决方案

I actually worked out what was wrong. It seems that the dialog functionality in jQueryUI adds to the DOM, by dynamically creating div for the dialog and its title bar.

Depending on the timing of things, that can cause issues when React is doing its reconciliation.

To resolve I implemented a Reactified version of a modal dialog.

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top