将 react-grid-layout 与 Blazor WebAssembly 集成时找不到“renderReactGridLayout”

Question

我在尝试将“react-grid-layout”集成到我的 Blazor WebAssembly 应用程序时遇到问题。

我使用以下代码创建了一个名为wwwroot/react-grid-layout.js的 JavaScript 文件：

var React = require('react');
var ReactGridLayout = require('react-grid-layout');

var renderReactGridLayout = React.createClass({
    render: function () {
        return (
            <ReactGridLayout className="layout" cols={12} rowHeight={30} width={1200}>
                <div key="a" data-grid={{ x: 0, y: 0, w: 1, h: 2 }}>A</div>
                <div key="b" data-grid={{ x: 1, y: 0, w: 3, h: 2 }}>B</div>
                <div key="c" data-grid={{ x: 4, y: 0, w: 1, h: 2 }}>C</div>
            </ReactGridLayout>
        );
    }
});

module.exports = renderReactGridLayout;

我在index.html中引用了这个文件，如下所示：

<head>
...
    <script type="text/jsx" src="react-grid-layout.js"></script>
</head>

此外，我在 Pages 文件夹中创建了ReactGridLayout.razor ，如下所示：

@inject IJSRuntime JS

<div id="grid-layout"></div>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
           await JS.InvokeAsync<object>("renderReactGridLayout", new object[] { "#grid-layout" });

        }
    }
}

我收到此错误：

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Could not find 'renderReactGridLayout' ('renderReactGridLayout' was undefined).
      Error: Could not find 'renderReactGridLayout' ('renderReactGridLayout' was undefined).

有什么帮助吗？

Answer 1

renderReactGridLayout 方法被加载（必需）到全局变量 ReactGridLayout 中，因此假设 renderReactGridLayout 是该模块的 API 的一部分，那么您需要完全确定：

await JS.InvokeAsync<object>("ReactGridLayout.renderReactGridLayout", new object[] { "#grid-layout" });