时间戳

首页 > 解决方案 > 如何重用带有钩子的 React 库

reactjs - 如何重用带有钩子的 React 库

问题描述

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

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

我的问题是我无法弄清楚如何重新使用它。

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

无效的挂机呼叫警告

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

  1. 你可能有不匹配的 React 和 React DOM 版本。
  2. 您可能违反了 Hooks 规则。
  3. 您可能在同一个应用程序中拥有多个 React 副本。

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

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

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

我尝试了不同的 webpack 配置：

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

--> 这会在消费应用程序中导致以下错误：

反应未定义

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

--> 这会导致以下错误：

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

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

重现步骤：

  1. 安装@mlaopane/formhook在您的反应应用程序（npm i @mlaopane/formhook或yarn add @mlaopane/formhook）中
  2. 尝试使用一个组件，例如
import { Form } from '@mlaopane/formhook'

export default function App() {
  return <Form />
}
  1. 您应该在控制台中看到错误

谢谢你帮我解决这个问题：）

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

标签： reactjsnpmpackagereact-hooks

解决方案

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

看起来Rollup是捆绑React库的更好选择。

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

推荐阅读