reactjs - React 组件没有正确导出（不能在里面使用钩子）

Question

所以我试图在一个项目的单独仓库中构建一个通用组件。组件 repo 是一个 npm 包。我将包含代码，以便您告诉我我做错了什么？

我的组件在：src/components/table/Table.tsx;

非常简单的代码：

const Table = () => {
  const [test, setTest] = useState(1);
  return <div>Test</div>
}

export default Table;

然后我有这个index.ts文件：

import Table from './components/table/Table.tsx';
export { Table };

然后我有package.json用于开发的构建命令：

"main": "dist/bundle.js",
"scripts": {
  "dev": "webpack --watch --mode development"
} 

然后是 webpack 配置文件：

const path = require("path");

module.exports = {
  entry: "./src/index.ts",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "babel-loader",
        exclude: /node_modules/
      },
    ]
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
    alias: {
      "@": path.resolve(__dirname, "src")
    }
  },
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
    libraryTarget: "umd",
    library: "my-library"
  }
};

然后在另一个项目中，我有包 JSON，我在其中导入了我的包（现在在本地，用于开发）：

"dependencies": {
    "@myuser/my-library": "file:../my-library",
}

然后我导入组件：

import { Table } from '@myuser/my-library';

然后使用它：

const MyComponent = () => {
  return (
    <div>
      <Table />
    </div>
  )
}

它抛出：

错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。

但是，如果我删除组件useState中的，Table那么它就可以完美地工作。

标签： reactjsnpm