使用复杂组件进行混音

Question

尝试包含 AG Grid https://www.ag-grid.com/react- data-grid/ 位于 Remix 项目中，但未渲染。

终端控制台或 Web 控制台没有错误，在 React 项目中工作正常。所以有一些混音和复杂的组件。已尝试从 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 中