如何重用带有钩子的 React 库

Posted 2023-02-22

【中文标题】如何重用带有钩子的 React 库

【英文标题】：How to re-use a React library with hooks

【发布时间】：2019-10-16 12:21:55

【问题描述】：

我正在编写自己的库来帮助使用 React 构建表单。

目标是能够在任何 React 应用程序中重用它（从头开始制作，使用 create-react-app、nextjs 等？）

我的问题是我不知道如何重新使用它。

这是我尝试在另一个项目中重用我的库时遇到的第一个问题：

Hook Call 无效警告

React 说原因可能是以下之一：

您的 React 和 React DOM 版本可能不匹配。 您可能违反了钩子规则。 您可能在同一个应用中拥有多个 React 副本。

经过调查，我已经排除了点1.和2.

我首先使用 Parcel 来构建我的库，但我需要从包中排除 React 以解决 3.

这就是我切换到 Webpack 并将 React 依赖项移动到 peerDependencies + devDependencies 的原因。

我尝试了不同的 webpack 配置：

const config: webpack.Configuration = 
  ...
  externals: 
    react: 'React'
  

--> 导致消费应用程序出现以下错误：

React 没有定义

const config: webpack.Configuration = 
  ...
  externals: 
    react: 
      root: 'React',
      amd: 'react',
      commonjs: 'react',
      commonjs2: 'react',
      umd: 'react',
    
  

--> 导致以下错误：

无法读取未定义的属性“createContext”

我尝试将我的库与 npm 链接一起使用，并在 npm 上发布它，但结果是一样的。

重现步骤：

在您的 React 应用程序中安装 @mlaopane/formhook（npm i @mlaopane/formhook 或 yarn add @mlaopane/formhook） 尝试使用组件，例如

import  Form  from '@mlaopane/formhook'

export default function App() 
  return <Form />

您应该会在控制台中看到错误

谢谢你帮我解决这个问题:)

注意：这是我的第一个问题，如果需要更多信息，请告知。

【参考方案1】：

受create-react-library启发，我终于找到了解决方案。

看起来 Rollup 更适合捆绑 React 库。

即使我仍然无法在本地链接我的库，但发布时可以使用它。