reactjs - 基于 Material UI 发布组件

Question

用例

我有一个简单的用例：我正在从应用程序中导出 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 && mkdir dist && babel ./src -d dist --copy-files"

我npm link用来导出/导入代码。

结果

Usingtest_a/src/TestComponent.js抱怨源代码正在jsx 使用test_a/dist/TestComponent.js（“编译”版本）抱怨钩子被错误地使用：

错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能由于以下原因之一而发生：

1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM）
2. 您可能违反了 Hooks 规则
3. 您可能在同一个应用程序中拥有多个 React 副本有关如何调试和修复此问题的提示，请参阅https://reactjs.org/link/invalid-hook-call 。

同样的方法也适用于不使用 Material UI 的组件。

完整的源代码

完整代码可在此处获得：https ://github.com/bluehipy/code4fun/tree/master/mui-test

你们有没有类似的问题？

谢谢！

标签： reactjsnpmmaterial-ui