鍍金池/ 問答/HTML/ React.createClass編譯時報錯TypeError

React.createClass編譯時報錯TypeError

clipboard.png
一個很簡單的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>
回答
編輯回答
單眼皮

你這個是寫的jsx啊, jsx需要編譯才能在瀏覽器里面跑...

2018年4月10日 03:41
編輯回答
舊顏

已解決。
需要導(dǎo)入'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')
);}
2018年8月25日 17:07