如何导出带有钩子的 React 库组件以在 html 文件中使用？

Question

我在尝试导出库组件以在我们不会使用导入的窗口环境中使用时遇到错误，并且收到错误Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component 。 没有重复的 react 版本，因为它被一个简单的 html 文件使用。

我的 webpack 文件看起来像

const config = {
    mode: 'development',
    externals: {
      react: 'React',
    },
    resolve: {
      extensions: ['.ts', '.tsx', '.js', '.jsx'],
      modules: [path.resolve(__dirname), path.resolve(__dirname, 'src'), 'node_modules'],
    },
    module: {
      rules: [
        {
          test: /\.(ts|js)x?$/,
          loader: 'babel-loader',
          exclude: /node_modules/,
        },
      ],
    },
    entry: path.resolve(__dirname, './src/components/GlobalNav/index.tsx'),
    output: {
      path: path.resolve(__dirname, './global-nav/dist'),
      publicPath: '/',
      library: 'GlobalNav',
      filename: 'globalNav-blog.js',
      libraryTarget: 'window',
    },
  };

并导出一个简单的组件

const GlobalNav = () => {
  const [test, setTest] = React.useState(33);
  return (
    <div>test</div>
  );
};

export default GlobalNav;

并在一个简单的 html 文件中使用

    <script
      crossorigin
      src="https://unpkg.com/react@16/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
    ></script>

    <!--......-->

    <script src="/globalNav.js"></script>
    <script>
      (function () {
        var root = document.getElementById("root");
        var GlobalNav = window.GlobalNav.default();

        ReactDOM.render(
          GlobalNav,
          root
        );
      })();
    </script>

如果我删除了钩子的使用，那么它就可以工作了。 如何将带有钩子的 React 组件导出为库，以便在没有导入的环境中使用？

Answer 1

您将功能组件作为函数而不是组件来调用。

var GlobalNav = window.GlobalNav.default();

ReactDOM.render(
    GlobalNav,
    root
);

尝试使用React.createElement 。

var GlobalNav = window.GlobalNav.default;

ReactDOM.render(
    React.createElement(GlobalNav),
    root
);