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

Posted 2023-02-19

【中文标题】位跟踪 React 组件的全局上下文

【英文标题】：Global context for bit-tracked React component

【发布时间】：2020-08-13 20:34:28

【问题描述】：

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

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

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

【参考方案1】：

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