reactjs - React 抱怨无效的函数组件

问题描述

我有一个迷你反应应用程序的问题。

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

该函数接受一个参数并返回一个 React 元素，因此根据文档它应该是一个有效的组件。React 和 ReactDOM 是同一个版本。如果你用钩子注释掉这行，错误就消失了，组件就会呈现出来。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Small Test</title>
    </head>
    <body>
        <div id="container"></div>
        <script
            src="https://unpkg.com/react@16/umd/react.development.js"
            crossorigin
        ></script>
        <script
            src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
            crossorigin
        ></script>
        <script>
            function MyComponent(props) {
                const [state, setState] = React.useState("");
                return React.createElement("span", null, "Hello Component!");
            }

            const container = document.getElementById("container");
            ReactDOM.render(MyComponent(), container);
        </script>
    </body>
</html>

如何解决？

标签： reactjs

ReactDOM.render(MyComponent(), container);

您将 MyComponent 作为函数调用，而不是从中创建元素。您需要将其更改为：

ReactDom.render(React.createElement(MyComponent), container);

JSX 的等价物是：

ReactDom.render(<MyComponent />, container);

reactjs - React 抱怨无效的函数组件

问题描述

解决方案

推荐阅读