在Blazor WebAssembly集成react-grid-layout时遇'renderReactGridLayout未定义'错误

核心问题本质 #

错误源于自定义JS方法未暴露到浏览器全局作用域，或是依赖库加载顺序/方式不正确，导致Blazor的IJSRuntime无法定位该方法。

分步解决方案 #

1. 修正JS文件的导出与依赖加载逻辑 #

浏览器原生不支持require这类CommonJS语法，且直接导出的方法不会自动挂载到全局window对象，Blazor无法直接访问。修改wwwroot/react-grid-layout.js如下：

// 将方法挂载到window全局对象，让Blazor能直接调用
window.renderReactGridLayout = function(containerId) {
    const { GridLayout } = ReactGridLayout;
    const gridItems = [
        { i: '1', x: 0, y: 0, w: 2, h: 2 },
        { i: '2', x: 2, y: 0, w: 2, h: 4 },
        { i: '3', x: 4, y: 0, w: 2, h: 5 }
    ];

    const App = () => (
        <GridLayout className="layout" cols={12} rowHeight={30} width={1200}>
            {gridItems.map(item => (
                <div key={item.i} style={{ background: '#ccc', padding: '10px' }}>{item.i}</div>
            ))}
        </GridLayout>
    );

    // React 18及以上版本用createRoot，旧版本用ReactDOM.render
    const root = ReactDOM.createRoot(document.getElementById(containerId));
    root.render(<App />);
};

2. 调整index.html的脚本引用顺序 #

在index.html中先加载React、ReactDOM和react-grid-layout的CDN资源，再引入自定义JS文件，且不要使用text/jsx类型（浏览器无法直接解析JSX，需额外配置Babel编译，用CDN加载已编译的库更简便）：

<!-- 建议放在<body>末尾 </body>标签前 -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-grid-layout@1.4.4/dist/react-grid-layout.min.js"></script>
<script src="react-grid-layout.js"></script>

3. 修正Blazor组件的调用逻辑 #

确保组件渲染完成后调用JS方法，传递正确的DOM容器ID：

@page "/react-grid"
@inject IJSRuntime JS

<div id="react-grid-container" style="width: 1200px; margin: 0 auto;"></div>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 调用全局window上的renderReactGridLayout方法
            await JS.InvokeVoidAsync("renderReactGridLayout", "react-grid-container");
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

额外注意事项 #

• 若坚持使用require模块化写法，需用Webpack/Rollup将JS文件打包成UMD格式，确保方法自动挂载到window对象。
• 注意React版本兼容性：如果使用React 17及以下，将JS中的createRoot改回ReactDOM.render(<App />, document.getElementById(containerId))。

内容的提问来源于stack exchange，提问作者Adham Enaya