位跟踪 React 组件的全局上下文

Question

我正在为一个网站开发一个 React 组件库。对于本地开发，我使用 Storybook。我认为bit 可以是一个很好的工具（比 npm 链接更好），用于导出库组件并将它们导入网站 repo。现在的问题是我正在为某些组件使用全局上下文，但位组件必须是隔离的并且是自给自足的。我不想包装我所有使用全局上下文的小组件，只在bit.dev 上呈现它们！

我已经能够使用装饰器解决故事书的相同问题。所以，我定义了一个组件而不用ContextProvider 包装它，然后在故事文件中我使用一个装饰器，用ContextProvider 包装我的组件。

有没有一种方法可以用全局上下文提供程序包装位组件，而无需包装将在生产网站中使用的实际组件，其中单个全局上下文提供程序包装整个应用程序？这种工作流程的最佳做法如何？

Answer 1

不建议在实现可重用组件时使用全局上下文。
不仅在使用 Bit 时，而且当另一个项目使用组件时，它需要具有相同的确切上下文才能使组件工作。降低组件的可重复使用性和对消费者的吸引力。
事实上，在 bit.dev 的操场上渲染示例并不舒适，这是它的副作用。
您可以做的是将状态与组件分离，并使用参数通过 API 直接获取状态和操作。或者您可以将状态封装在组件内部。 您可以在 Bit 构建可重用组件的最佳实践中了解更多信息 - https://docs.bit.dev/docs/best-practices#state-managers
还有这里 - https://github.com/Tallyb/reusable-components-styleguide#globals