React JS：浏览器控制台显示，“未捕获的 TypeError：type.apply 不是函数”并且页面显示为空白答案

【问题标题】：React JS: Browser console displays, "Uncaught TypeError: type.apply is not a function" and page comes out blankReact JS：浏览器控制台显示，“未捕获的 TypeError：type.apply 不是函数”并且页面显示为空白
【发布时间】：2015-07-18 06:21:19
【问题描述】：

我是 React js 的新手，所以我在网上学习了一个教程，该教程将带我了解基础知识，但我被卡住了很多次。我的问题范围从没有检测到变化的监视任务到我在网上找到解决方案的无限构建。但是这个特殊的问题很难解决，我第一次决定在论坛上发布我的问题。

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'))

【问题讨论】：

标签： javascript html node.js reactjs react-jsx

【解决方案1】：

当你使用 JSX 时，React 组件需要被一个带有首字母大写字母的变量引用。

见HTML Tags vs. React Components

React 的 JSX 使用大写与小写的约定来区分本地组件类和 HTML 标签。

看起来您使用的教程是针对旧版本的 React，因为在几个版本之前，React.renderComponent() 已替换为 React.render()。这是使用最新版本的有效 sn-p：

<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>

【讨论】：

非常感谢。我尝试了您的代码，下载了您使用的特定版本，它就像魔术一样工作。再次感谢