将React类移动到单独的文件中
Moving React classes into separate files
完成React教程后,这是我的index.html文件:
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
</head>
<body>
<div id="content"></div>
<script src="lib/main.js"></script>
</body>
</html>
这是我的src/main。jsx文件:
var CommentBox = React.createClass({
getInitialState: function() {
return {data: []};
},
loadCommentsFromServer: 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)
});
},
handleCommentSubmit: function(comment) {
var comments = this.state.data;
var newComments = comments.concat([comment]);
this.setState({data: newComments});
$.ajax({
url: this.props.url,
dataType: 'json',
type: 'POST',
data: comment,
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
componentDidMount: function() {
this.loadCommentsFromServer();
setInterval(this.loadCommentsFromServer, this.props.pollInterval);
},
render: function() {
return (
<div className="commentBox">
<h1>Comments Yo</h1>
<CommentForm onCommentSubmit={this.handleCommentSubmit} />
<CommentList data={this.state.data} />
</div>
);
}
});
var CommentForm = React.createClass({
handleSubmit: function(e) {
e.preventDefault();
var author = React.findDOMNode(this.refs.author).value.trim();
var text = React.findDOMNode(this.refs.text).value.trim();
if (!text || !author) {
return;
}
// send request to the server
this.props.onCommentSubmit({author: author, text: text});
React.findDOMNode(this.refs.author).value = '';
React.findDOMNode(this.refs.text).value = '';
return;
},
render: function() {
return (
<form className="commentForm" onSubmit={this.handleSubmit}>
<input type="text" placeholder="Your name" ref="author" />
<input type="text" placeholder="Say something..." ref="text" />
<input type="submit" value="Post" />
</form>
);
}
});
var CommentList = React.createClass({
render: function() {
var commentNodes = this.props.data.map(function (comment) {
return (
<Comment author={comment.author}>
{comment.text}
</Comment>
);
});
commentNodes.reverse();
return (
<div className="commentList">
{commentNodes}
</div>
);
}
});
var Comment = React.createClass({
render: function() {
var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
<span dangerouslySetInnerHTML={{__html: rawMarkup}} />
<hr />
</div>
);
}
});
React.render(
<CommentBox url="comments.json" pollInterval={2000} />,
document.getElementById('content')
);
另外,我运行这个命令将我的jsx转换为js:
babel --watch src/ --out-dir lib/
我想将每个React类移动到自己的文件中。例如,我想创建以下四个文件(注意:每个映射到我的main中的顶级"var"声明)。JSX文件)并将所有这些类拉到我的main中。jsx文件:
comment.jsx
commentList.jsx
commentForm.jsx
commentBox.jsx
我该怎么做?
在require和es6上敲了我的头一段时间后,我仍然没有一个很好的直觉,如何将所有这些分开,或者如果像require/es6这样的东西是正确的方法。
谢谢你的帮助!
在使用create-react-app工具创建的项目中,分离组件似乎工作得很好。在文件Hello.jsx
:
import React from 'react';
var Hello = React.createClass({
render: function() {
return (
<p>Hello world!</p>
);
}
});
// Must export!
export default Hello;
然后你可以用
将组件导入到另一个文件中import Hello from './Hello.jsx'
如果你想为每个React类创建一个文件,我建议你看看webpack。你可以把React类开发成CommonJs模块,它会负责把它们捆绑在一起。
此外,我认为这是一个很好的选择,因为您想使用babel来转换jsx文件。这可以通过webpack加载器来解决。基本的webpack配置文件应该包含如下内容:
webpack.config.js
var webpack = require('webpack');
module.exports = {
entry: './src/main.jsx',
output: {
// Output the bundled file.
path: './lib',
// Use the name specified in the entry key as name for the bundle file.
filename: 'main.js'
},
module: {
loaders: [
{
// Test for js or jsx files.
test: /'.jsx?$/,
exclude: /node_modules/,
loader: 'babel'
}
]
},
externals: {
// Don't bundle the 'react' npm package with the component.
'react': 'React'
},
resolve: {
// Include empty string '' to resolve files by their explicit extension
// (e.g. require('./somefile.ext')).
// Include '.js', '.jsx' to resolve files by these implicit extensions
// (e.g. require('underscore')).
extensions: ['', '.js', '.jsx']
}
};
如果你想要实际的代码,我创建了一个GitHub react-tutorial-webpack存储库。
在我看来,ES6可以是一种编写类和模块的方式,但不能真正管理它们。为了管理模块,我将使用requires,这是我所知道的最简单的模块管理器。但也许其他人会给你别的建议。
在我看来,你需要一个模块管理器,而requires是一个很好的工具。
:基本上,对于requirejs,你会写一个main.js文件(这是一个require的配置文件,定义模块的路径和首先加载的东西)在你的主html中,你会写这样的代码来加载main.js
<script data-main="scripts/main" src="scripts/require.js"></script>
在你的视图中,你将使用define('MyModule'…)调用你需要的模块,使用你之前在main.js中定义的名称(带路径)。
阅读文档,不要担心,这并没有那么可怕:http://requirejs.org/docs/start.html#add下面是一个简单的例子:https://github.com/volojs/create-template
破坏代码的方法很简单,你会返回(这就是你用define()导出模块的方式)你的reactclass。为您拥有的每个类创建一个文件。但是你也可以创建模块/utils来收集横向函数(解析…等)。
希望有帮助!
- 从单独的html文件预览Javascript文本
- 有什么“;错误的”;将javascript放在asp.net表单上,而不是放在单独的文件中
- jQueryAjax调用在单独的.js文件中不起作用
- Bootstrap CSS和JS我必须将它们包含在单独的文件中,或者可以编译它们
- 正在将Visual Studio 2012 JavaScript Intellisense标记移动到单独的文件
- 在 Node.JS 中,如何从单独的.js文件中返回整个对象
- google.setOnLoadCallback()在单独的JS文件中不起作用
- 单独的文件(HTML5、CSS和JS)
- Angular/Ionic:将所有文本保存在一个单独的文件中
- 将路由器配置放在Aurelia中的一个单独文件中
- 将另一个文件中的对象添加到单独文件中的阵列中
- 如何使用ngModel将自定义控件的提供程序扩展器分离到Angular 2中的单独文件中
- 在AJAX成功响应中执行Javascript代码(在单独的文件中)
- 使用AJAX在单独的文件中调用php函数
- 是否可以将此javascript代码(或其中的一部分)移动到单独的文件中,而不是内联
- JavaScript 无法从单独的文件工作
- 将 JavaScript 代码放在单独的文件中是行不通的
- 如何在单独的文件中调用函数 js.
- 如何在单独的文件中使用自定义Vtype,以便在EXT.JS中全局使用它们
- 用js调用php, js在get请求时停止,两个文件单独工作