문제

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