如何在没有存储的情况下在npm上封装react组件

Question

我一直在读关于如何将react组件发布到NPM的文章，但当组件有一个使用类似mobx的库实现的存储时，我对细节感到困惑。举一个简单的例子，比如你可以在这里看到完整的组件：

const App = () => {
const store = useLocalStore(() => ({
data: initialData,
index: 0,
addRow() {
if (this.index < this.data.length) {
this.data = [...this.data, addData[this.index++]];
}
}
}));
return useObserver(() => (
<div className="App">
<MaterialTable
columns={columns}
data={store.data}
title="Sample Material Table"
/>
<Button onClick={store.addRow}>Add Row</Button>
</div>
));
};

本例使用MobX，其中useObserver和useLocalStore特定于该库。我个人选择使用MobX。假设我将其发布到NPM，并在另一个更喜欢使用其他状态管理库的项目中使用它。我认为在这种情况下，我在这里看到的是令人困惑的，而且我甚至不确定它是否会起作用——或者可能会。。。我不知道。

问题很简单：我应该如何将这个组件组合在一起，以便与任何状态管理库一起工作？

Answer 1

假设您希望使用mobx和默认react hooks作为组件的两种不同类型的状态管理。

解决方案1:

首先，使mobx成为库的对等依赖项，然后构建包最终用户可以像这样使用(导入(您的库：

//for regular (default) usage with hooks
import myComponent from 'package-name/hooks'
// for mobx version
import myComponent from 'package-name/mobx'

在任何情况下，您都需要分离不同状态库的使用，并在创建库时在内部尝试尽可能多地重用(共享(代码。

解决方案2:

在同一npm作用域下发布两个(甚至三个(不同的包例如CCD_ 6和CCD_在所有包@myLib/default之间共享