React JS: Browser console displays, "Uncaught TypeError: type.apply is not a function" and page comes out blank

Question

我是 React js 的新手，所以我正在按照在线教程学习基础知识，但我多次遇到困难。我的问题范围从 watch 任务没有检测到无限建筑的变化，我在网上找到了解决方案。但是这个特殊的问题一直很难解决，我第一次决定 post 在论坛上解决我的问题。

jsx 文件位于另一个文件中，该文件是使用我通过 NPM 下载的反应工具编译的。当我打开浏览器时，它显示

Uncaught TypeError: type.apply is not a function

页面仍然空白。当我在开发人员工具中检查挂载点 div 时，它不包含任何内容

这是html代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Timer</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/style.css">
        <script src="js/react.js"></script>
  </head>
<body>
    <div id="mount-point"></div>
    <script src="js/react-code.js"></script>
    </body>
</html>

这是我的 jsx 文件。

var counter = React.createClass({
incrementCount: function(){
    this.setState({
        count: this.state.count + 1
    })
},
getInitialState: function(){
    return {
        count: 0
    }
},
render: function(){
    return (
        <div class="my-component">
            <h1>Count: {this.state.count} </h1>
            <button type="button" onClick={this.incrementCount}>Increment </button>
        </div> 
    );
}
});

React.renderComponent(<counter/>, document.getElementById('mount-point'))

Answer 1

当您使用 JSX 时，React 组件需要由首字母大写的变量引用。

见HTML Tags vs. React Components

React's JSX uses the upper vs. lower case convention to distinguish between local component classes and HTML tags.

您使用的教程似乎是针对旧版本 React 的，因为 React.renderComponent() 在几个版本前已被 React.render() 取代。这是使用最新版本的工作片段：

<meta charset="UTF-8">
<script src="https://fb.me/react-0.13.2.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.2.js"></script>
<div id="app"></div>
<script type="text/jsx;harmony=true">void function() { "use strict";

var Counter = React.createClass({
  incrementCount() {
    this.setState({
      count: this.state.count + 1
    })
  },
  getInitialState() {
    return {
      count: 0
    }
  },
  render() {
    return <div className="my-component">
      <h1>Count: {this.state.count}</h1>
      <button type="button" onClick={this.incrementCount}>Increment </button>
    </div> 
  }
})

React.render(<Counter/>, document.getElementById('app'))

}()</script>

React JS: Browser console displays, "Uncaught TypeError: type.apply is not a function" and page comes out blank

React JS: Browser console displays, "Uncaught TypeError: type.apply is not a function" and page comes out blank

javascript

html

node.js

reactjs

react-jsx