Question

我试图通过React Tutorial并遇到绊脚石。我有以下HTML

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="shortcut icon" href="./src/favicon.ico" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" />
    <script src="https://npmcdn.com/react@15.3.1/dist/react.js"></script>
    <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.js"></script>
    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
    <script src="https://npmcdn.com/jquery@3.1.0/dist/jquery.min.js"></script>
    <script src="https://npmcdn.com/remarkable@1.6.2/dist/remarkable.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
    <script type="text/babel" src="src/index.js"></script>
    <title>React App</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div id="sidebar" class="col s3">
        </div>
        <div id="content" class="col s9">
        </div>
      </div>
    </div>
    <script type="text/babel">

    </script>
  </body>
</html>

使用以下javascript文件。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

var data = [
  { id: 1, author: "Pete Hunt", text: "This is the 1st comment" },
  { id: 2, author: "Jordan Walke", text: "This is *the 3rd* comment." },
  { id: 3, author: "John Doe", text: "This comment is stupid." }
];

var CommentBox = React.createClass({
  getInitialState: function() {
    return { data: [] };
  },
  componentDidMount: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({ data: data });
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
        <CommentForm />
      </div>
    );
  }
});

var CommentList = React.createClass({
  render: function() {
    var commentNodes = this.props.data.map(function(comment) {
      return (
        <Comment author={comment.author} key={comment.id}>
          {comment.text}
        </Comment>
      );
    });
    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
});

var CommentForm = React.createClass({
  render: function() {
    return (
      <div className="commentForm">
        I'm a Form.
      </div>
    );
  }
});

var Comment = React.createClass({
  rawMarkup: function() {
    var markdown = new Remarkable();
    var rawMarkup = markdown.render(this.props.children.toString());
    return { __html: rawMarkup };
  },
  render: function() {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        <span dangerouslySetInnerHTML={this.rawMarkup()} />
      </div>
    );
  }
});

ReactDOM.render(
  <CommentBox data={data} />,
  document.getElementById('content')
);

我正在使用从Create React App NPM模块创建的内容。当我运行应用程序时，我告诉：

非常明确
$未定义

JQuery和Remarkable都包含在我的HTML文件中，我确保将它们放在我的index.js脚本之前。为什么应用程序无法找到类型？这是React问题，还是Node，js问题？我对web-dev有点新意，所以我不确定哪个组件在这里有问题，或者我做错了什么。

Answer 1

好像你的脚本是异步加载的。等待所有脚本加载jQuery ...


(function($){$(function(){

  // your react app code here...

})})(jQuery);

React无法找到我已包含的第三方脚本

1 个答案: