React.createClass编译时报错TypeError

发布于
2018-01-09

新手上路，请多包涵

一个很简单的ajax例子代码如下：
index.js:

import React from 'react';
import ReactDOM from 'react-dom';

var ajaxdemo = require('./AjaxDemo.js');
ajaxdemo.AjaxDemo();

AjaxDemo.js:

import React from 'react';
import ReactDOM from 'react-dom';
import jquery from 'jquery';


var RepoList = React.createClass({
  getInitialState: function() {
    return {
      loading: true,
      error: null,
      data: null
    };
  },
  componentDidMount() {
    this.props.promise.then(
      value => this.setState({loading: false, data: value}),
      error => this.setState({loading: false, error: error}));
  },
  render: function() {
    if (this.state.loading) {
      return <span>Loading...</span>;
    }
    else if (this.state.error !== null) {
      return <span>Error: {this.state.error.message}</span>;
    }
    else {
      var repos = this.state.data.items;
      var repoList = repos.map(function (repo, index) {
        return (
          <li key={index}><a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}</li>
        );
      });
      return (
        <main>
          <h1>Most Popular JavaScript Projects in Github</h1>
          <ol>{repoList}</ol>
        </main>
      );
    }
  }
});

export function AjaxDemo(){
ReactDOM.render(
  <RepoList promise={jquery.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />,
  document.getElementById('ajaxdemo')
);}

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="../manifest.json">
    <link rel="shortcut icon" href="../favicon.ico">
    <title>React App</title>
  </head>
  <body>
    <div id="ajaxdemo"></div>
  </body>
</html>

react javascript

阅读 2k

2 个回答

得票最新

ryanchenzhikuan

416

发布于
2018-01-11

✓ 已被采纳新手上路，请多包涵

已解决。
需要导入'create-react-class';模块后才能够使用createclass写法

import React from 'react';
import ReactDOM from 'react-dom';
import jquery from 'jquery';
import createReactClass from 'create-react-class';

var RepoList = createReactClass({
  getInitialState: function() {
    return {
      loading: true,
      error: null,
      data: null
    };
  },
  componentDidMount() {
    this.props.promise.then(
      value => this.setState({loading: false, data: value}),
      error => this.setState({loading: false, error: error}));
  },
  render: function() {
    if (this.state.loading) {
      return <span>Loading...</span>;
    }
    else if (this.state.error !== null) {
      return <span>Error: {this.state.error.message}</span>;
    }
    else {
      var repos = this.state.data.items;
      var repoList = repos.map(function (repo, index) {
          if(index<10){
          return (
          <li key={index}><a target="blank" href={repo.html_url} >{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}</li>
          );}
      });
      return (
        <main>
          <h1>Most Popular JavaScript Projects in Github</h1>
          <ol>{repoList}</ol>
        </main>
      );
    }
  }
});

export function AjaxDemo(){
ReactDOM.render(
  <RepoList promise={jquery.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />,
  document.getElementById('ajaxdemo')
);}