Question

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

Answer 1

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

请参阅HTML Tags vs. React Components

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

看起来您正在使用的教程是针对旧版本的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：浏览器控制台显示，＆＃34; Uncaught TypeError：type.apply不是函数＆＃34;并且页面空白

1 个答案: