无法在ajax:ModalPopupExtender中呈现Griddlejs？

Question

首先，我事先道歉，我是非常新的反应，这是我第一次实现网格组件。

目前，我能够在webforms解决方案中成功地显示一个" griddle“，但是，当我将完全相同的网格添加到它不显示并且没有抛出错误的modalpopupextender中时，如果我使用浏览器工具检查div，脚本就在页面中。

我把它放在一个控件中，以便在so的几个区域中测试它

• 我怎样才能做到这一点？
• 是否有一种方法来延迟渲染网格时，modalpopupextender正在显示？ <%@ Control Language="C#“AutoEventWireup=”真“CodeBehind="Griddle.ascx.cs”Inherits="Website.UserControls.Griddle“%>

资源：http://griddlegriddle.github.io/Griddle/index.html

为了在页面上显示网格，我执行以下操作(尽管在前面的迭代中，React.render部分在控件中)：

<div id="div1">
     <AppTest1:Griddle runat="server" ID="Griddle" />
               <script type="text/jsx">
                      React.render(
                            <Griddle
                            results={fakeData}
                            customNoDataComponent={NoDataComponent}
                            showSettings={true} 
                            showFilter={true} 
                            columnMetadata={columnMeta} 
                            columns={["firstName", "lastName", "email", "work", "age", "optedin"]}
                            />, 
                                                document.getElementById("griddle-basic")
                      );
               </script>
</div>

Answer 1

我发现了答案：

网格组件之所以没有显示，是因为上面代码片段中的脚本是在JSX中，但是，当我逐步浏览时，我发现JSX代码被正确地解析了，因为在页面命中并将JSX转换为Javascript时，组件绑定的元素是不可见的，在触发弹出并查看组件时不会显示组件。

我的解决办法是在编译之前手动将JSX脚本转换为Javascript，并将其放入javascript函数中，当ajax选项卡容器的选项卡在ajax模式弹出扩展程序中切换时调用该函数。

由于我对JSX和React的经验有限，可能有一种更好的方法，例如，如果您为网格组件定义了初始状态，然后在弹出窗口中强制进行状态更改，那么可能会有更好的方法，但由于这是我前面描述的解决方案，所以我现在需要它。

这里是我使用的JS编译器。