Ответная сетка с неработающим шрифтом
У меня есть новый проект, и я пытаюсь использовать ответ-сетка-макет для построения панели мониторинга. к сожалению, я не могу заставить его работать.
Я использую:
"@types/react-grid-layout": "0.16.5"
"react-grid-layout": "0.16.5"
когда я пытаюсь использовать его в файле TSX с import { ReactGridLayout } from 'react-grid-layout';
я получаю ошибку: /node_modules/@types/react-grid-layout/index"' has no exported member 'ReactGridLayout'.
Любое предложение, что я делаю не так?
Обновить
Дополнительная информация: я использую его в веб-приложении SPA, которое работает на.Net core 2.1 Как я пытаюсь его использовать:
import * as React from 'react';import { RouteComponentProps } from 'react-router';import ReactGridLayout, { Layout } from 'react-grid-layout';//const ReactGridLayout = require('react-grid-layout');
Панель экспорта класса расширяет React.Component, {}> {
// ReactGridLayout = require ('act-grid-layout ');
public render () {
// const ReactGridLayout = require ('act-grid-layout ');
var layout = [
{i: 'a', x: 0, y: 0, w: 1, h: 2, static: true},
{i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4},
{i: 'c', x: 4, y: 0, w: 1, h: 2}
];
return <div><ReactGridLayout className="layout" layout={layout} cols={12} rowHeight={30} width={1200}><div key="a">a</div><div key="b">b</div><div key="c">c</div></ReactGridLayout></div>;} }
2 ответа
Наконец, я заставил его работать, выполнив следующие шаги, которые можно найти в https://github.com/Microsoft/TypeScript-React-Starter/issues/8 Короче говоря: Добавить "esModuleInterop": true,
"allowSyntheticDefaultImports": true, в ваш файл tsconfig.json. После этого все заработало как шарм. Надеюсь, это поможет, если у кого-то еще есть подобные проблемы в приложении.net core реагируют.
Иногда импорт с тем же именем работает в JavaScript, но не работает в TypeScript. Попробуй с require, у меня сработало.
const ReactGridLayout = require('react-grid-layout');
У меня есть рабочий пример с TypesScript https://codesandbox.io/s/5x5nyjqjwl