在 hello world 应用程序上react错误“Uncaught TypeError: type.toUpperCase is not a function”

IT技术 javascript reactjs
2021-05-09 04:37:54

我已经开始涉足 reactjs，在学习教程后，我在标题上遇到了错误，只是运行了一个非常简单的 hello world 应用程序。以下是我拥有的单页代码：

   <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
        <script src="https://fb.me/react-0.13.3.js"></script>
        <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
    </head>
    <body>
      <script type="text/jsx">
        // Define a class
        var HelloWorld = React.createClass({
          render: function() {
            return <div>
              Hello World!
            </div>
          }
        });

        // create element with this class
        var element = React.createElement({HelloWorld});

        // Render this class and  place it in the body tag
        React.render(element, document.body);
      </script>
    </body>

    </html>

非常感谢任何提示或解决方案。

3个回答

就我而言，我创建了一个 React 元素，但我忘记在文件末尾导出它：

var React = require('react');

var About = React.createClass({
    render: function(){
        return (
            <div>
                <h1>The about page</h1>
            </div>
        );
    }
});
export {
    About, About as default
};

以下行有错误：

var element = React.createElement({HelloWorld});

它应该是：

var element = React.createElement(HelloWorld);

注意缺少花括号。

嘿，渲染元素的正确方法是 

React.render(<HelloWorld />, document.body);

您不需要先创建元素。所以总的来说你的代码应该看起来像

var HelloWorld = React.createClass({
    render: function () {
        return <div > Hello World! < /div>
    }
});

React.render( < HelloWorld / > , document.body);
其它你可能感兴趣的问题
上一篇导入字体很棒的库的 Webpack 问题 下一篇如何使用 fetch 制作常用的 API 调用函数