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

Posted 2023-02-21

【中文标题】如何使用带有 React 视图切换的 jQuery 模式？

【英文标题】：How to use a jQuery modal with React view switching?

【发布时间】：2014-05-02 08:39:16

【问题描述】：

在 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/

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

【参考方案1】：

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

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

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

【讨论】：

所以你完全停止使用 jQueryUI 对话框了吗？我在尝试使用基金会的揭示时遇到了类似的问题。

你有你实现的 Reactived 版本的链接或代码示例吗？