javascript - React JS : Browser console displays, "Uncaught TypeError: type.apply is not a function"页面显示为空白

标签 javascript html node.js reactjs

我是 React js 新手,所以我正在遵循在线教程,该教程将引导我完成基础知识,但我多次陷入困境。我的问题包括 watch 任务无法检测到无限构建的变化,我在网上找到了解决方案。但这个特殊问题很难解决,我决定第一次在论坛上发布我的问题。

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

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

最佳答案

当您使用 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>

关于javascript - React JS : Browser console displays, "Uncaught TypeError: type.apply is not a function"页面显示为空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30105112/

相关文章:

node.js - 创建单 Node 模块以访问用 CoffeeScript 编写的单独文件中的多个扩展类

javascript - 页面更新触发功能(无限滚动)

javascript - Webpack react 热加载器不工作

html - 向上翻译该 div 时,如何去除该 div 下方的空白?

node.js - 使用云功能在 Google Cloud pub/sub 上发布只需 3 分钟 - NodeJS

node.js - 需要导出变量错误

javascript - 使用 jQuery 显示/隐藏元素

javascript - Click 如何在没有 Jquery 或 Javascript 的情况下工作

php - Arduino 和 PHP 通过串行传入字节读取

css - 在固定的 div 中居中两个宽度可变的 css div