React找不到我包含的第三方脚本
React can't find 3rd party scripts I've included
我正试图通过React教程工作,并遇到了一个绊脚石。我有以下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开发有点陌生,所以我不确定哪个组件在这里有问题,或者我做错了什么。
似乎您的脚本正在异步加载。等待所有的脚本加载jQuery…
(function($){$(function(){
// your react app code here...
})})(jQuery);
相关文章:
- 浏览器开发工具:禁用第三方脚本中的警告
- 一旦第三方脚本加载失败,立即运行一段JavaScript
- 第三方脚本是否可以设置第一方cookie
- 代理第三方脚本是否会引入 XSS 攻击
- 在页面中注入第三方 HTML(带有脚本)
- 限制第三方脚本 - 谷歌卡哈
- 在某些第三方 Web 应用程序拥有的网页上运行 Java 脚本
- JavaScript - 是否可以修改第三方脚本(外部托管)使用的 setInterval/setTimeout 的行为
- 在第三方 ajax 之后保持 jquery 脚本的活动
- 有没有一种方法可以暂停(稍后取消暂停)所有在第三方网站上运行的js脚本,使用greatemonkey
- 一旦加载了特定的第三方脚本,我可以触发函数吗
- 使用html中的第三方脚本
- 从第三方站点配置Javascript的最佳方式是什么's脚本/include标记
- ReactJS -在渲染前等待第三方脚本响应
- 使用webpack将第三方脚本导入到React/Redux应用程序中
- React找不到我包含的第三方脚本
- 操作第三方脚本添加的DOM元素
- 如何使用填充、第三方脚本和相互依存关系
- 第三方脚本破坏了我的 JS
- Rails 3.1中的第三方脚本缓存