React Invalid hook call问题求助：非Node/JSX环境下useState报错

此前制作的页面未使用useState钩子，如今尝试使用该钩子时一直收到Invalid hook call警告，试过多种调整方案都没解决。昨晚已下载最新版的react.development.js和react-dom.development.js。

HTML页面代码 #

<html>
    <head>
...
        <script src="./react.development.js"></script>
        <script src="./react-dom.development.js"></script>

        <script type="module">
            import AppTest from "./AppTest.js";
            const rootCtr = document.getElementById('root');
            const root = ReactDOM.createRoot(rootCtr);
            window.addEventListener('load', (event) => {
                root.render(AppTest());
            });
        </script>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

AppTest.js模块代码 #

export default function AppTest(props) {
  const [count, setCount] = React.useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return React.createElement('div', null, 
    `Count: ${count}`,
    React.createElement('button', { onClick: handleClick }, 'Increment')
  );
}

问题出在组件渲染的方式上：你直接调用AppTest()把组件当成普通函数执行了，这会跳过React的组件生命周期管理，导致钩子调用规则被打破。React要求必须通过React.createElement或JSX来渲染组件，这样React才能正确处理钩子逻辑。

修改HTML中的渲染代码：

window.addEventListener('load', (event) => {
    // 用React.createElement包裹组件，而非直接调用函数
    root.render(React.createElement(AppTest));
});

另外要确保react.development.js和react-dom.development.js的版本完全一致，版本不匹配也可能触发这类钩子调用错误。

内容的提问来源于stack exchange，提问作者Baba