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

Question

尝试导出库组件以在不使用导入的窗口环境中使用时出现错误，并且出现错误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 组件导出为库，以便在没有导入的环境中使用？

标签： javascriptreactjswebpackreact-hooks

Answer 1

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

var GlobalNav = window.GlobalNav.default();

ReactDOM.render(
    GlobalNav,
    root
);

尝试使用React.createElement.

var GlobalNav = window.GlobalNav.default;

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