Блог

Главная - Вопросы по программированию - Публикация компонентов на основе пользовательского интерфейса материалов

Публикация компонентов на основе пользовательского интерфейса материалов

#reactjs #npm #material-ui

Вопрос:

Пример использования

У меня есть простой вариант использования: я экспортирую один компонент в React из приложения test_a и пытаюсь использовать компонент в другом приложении test_b

Код компонента:

 import React from 'react';
import Button from '@mui/material/Button';


const TestComponent = () => <Button>TestComponent</Button>

export default  TestComponent

Я использую babel для компиляции кода.
"babel": "rm -rf dist amp;amp; mkdir dist amp;amp; babel ./src -d dist --copy-files"

Я использую npm link для экспорта / импорта кода.

Результат

Использование test_a/src/TestComponent.js жалуется на jsx используемый исходный код test_a/dist/TestComponent.js («скомпилированная» версия) жалуется на неправильное использование крючков:

Ошибка: Неверный вызов соединения. Крючки могут вызываться только внутри тела функционального компонента. Это может произойти по одной из следующих причин:

  1. У вас могут быть несовпадающие версии React и средства визуализации (например, React DOM).
  2. Возможно, вы нарушаете Правила Крючков
  3. У вас может быть более одной копии React в одном приложении см. https://reactjs.org/link/invalid-hook-call для получения советов о том, как отладить и устранить эту проблему.

Тот же подход хорошо работает для компонента, который не использует пользовательский интерфейс Material.

Полный исходный код

Полный код доступен здесь: https://github.com/bluehipy/code4fun/tree/master/mui-test

У кого-нибудь из вас были подобные проблемы?

Спасибо!

Метки: