使用复杂组件重新混合

Question

正在尝试将 AG Grid https://www.ag-grid.com/react-data-grid/ 包含在 Remix 项目中，但未呈现。

终端控制台或网络控制台没有错误，在反应项目中这工作正常。所以一些带有混音和复杂组件的东西。已尝试从 remix-utils 包装在 ClientOnly 中，但没有区别。

import React, { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';
import{ClientOnly } from 'remix-utils';

export default function Grid() {
 const [rowData] = useState([
    {make: "Toyota", model: "Celica", price: 35000},
    {make: "Ford", model: "Mondeo", price: 32000},
    {make: "Porsche", model: "Boxter", price: 72000}
]);

const [columnDefs] = useState([
    { field: 'make' },
    { field: 'model' },
    { field: 'price' }
])

return (
    <ClientOnly>
    <div className="ag-theme-alpine" style={{height: 400, width: 600}}>
        <AgGridReact
            rowData={rowData}
            columnDefs={columnDefs}>
        </AgGridReact>
    </div>
    </ClientOnly>
 );
}

Answer 1

发现错误。它缺少

<Scripts />

标签在 root.tsx

使用复杂组件重新混合

Remix Using Complex Components

datagrid

reactjs

remix