将React组件拆分为单独的文件 [英] Splitting React components into separate files
问题描述
这似乎是一个常见的问题，我发现很多人问它，反应都非常不同，似乎有点打击和错过。我看过各种视频教程，阅读大量的教程和文档。但是可惜的是，React的移动速度超过了作家能够跟上的速度。或者我只是误解。
This seems to be a common question, I'm finding a lot of people asking it and the responses are all very different and seem to be a bit hit and miss. I've watched various video tutorials, read plenty of tutorials, and the documentation. But alas it seems React is moving faster than the writers can keep up with. Or I'm just misunderstanding.
我想在一个单独的文件中创建每个组件，这里逻辑。我有React工作，但无法解决如何导入和使用其他文件。我不知道这是否因为Chrome不会加载在文件中，而不是在Web服务器（本地测试dev），或者如果我只是一切都错了。
I want to create each component in a separate file, where logical to do so. I have React working, but am unable to work out how to import and use additional files. I don't know if this is because Chrome will not load in files when not on a web server (local test dev), or if I'm just going about it all wrong.
这是我的HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Test One</title>
</head>
<body>
<div id="rootNode"></div>
<script src="dist/bundle.js"></script>
</body>
</html>
这里是我的main.js：
And here is my main.js:
var React = require('react');
var ReactDOM = require('react-dom');
var Square = require('../components/square.jsx').square;
ReactDOM.render(
<div>
<h1>Hello React!</h1>
<Square />
</div>,
document.getElementById('rootNode')
);
如果我不尝试使用Square，这个工作正常。
This works fine if I don't try to use Square also.
这是我的square.jsx：
This is my square.jsx:
class Square extends React.Component{
render() {
return (
<p>Square</p>
)
}
}
module.exports = {
square: Square
};
Babel创建bundle.js很好，没有错误。 Chrome抛出错误：
Babel create the bundle.js fine, no errors. Chrome throws the error:
未捕获的语法错误：尚未支持阻止范围的声明（let，const，function，
类）外部严格模式
Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
我已经尝试过以下的方法，以及许多其他事情， p>
I have tried the following also for square, along with many other things, all lost from the undo queue:
import React from 'react';
class Square extends React.Component{
render() {
return (
<p>Square</p>
)
}
}
export default Square;
感谢。
编辑：
也尝试了：
var {Component} = React;
class Square extends Component{
render() {
return (
<p>Square</p>
)
}
}
window.Square = Square;
如果这里有帮助的话是Gulp文件：
And if it helps here is the Gulp file:
var vendors = [
'react'
];
gulp.task('vendors', function () {
var stream = browserify({
debug: false,
require: vendors
});
stream.bundle()
.pipe(source('./src/main.js'))
.pipe(gulp.dest('./dist/bundle.js'));
return stream;
});
和package.json：
And the package.json:
{
"name": "reacttestone",
"version": "1.0.0",
"description": "Testing React Components",
"main": "index.js",
"dependencies": {
"babel-preset-react": "^6.1.2",
"babelify": "^7.2.0",
"react": "^0.14.2",
"react-dom": "^0.14.2"
},
"devDependencies": {
"gulp": "^3.9.0",
"vinyl-source-stream": "^1.1.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Myself",
"license": "MIT"
}
推荐答案
您的es6导出示例如 export default Square 应该正常工作。它似乎你已经安装babelify，但你不是在转换过程中使用它，因此为什么浏览器抱怨你正试图使用es6功能以外的严格模式。
Your es6 example of exporting like export default Square should work fine. It looks like you've installed babelify but you're not using it in the transform process, hence why the browser is complaining that you're trying to use es6 features outside of strict mode.
如果您查看 babelify 说明，它会执行以下操作：
If you look at the babelify instructions it says to do something like:
var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var gutil = require('gulp-util');
gulp.task('browserify', function () {
browserify('./src/main.js', { debug: true })
.transform('babelify', {presets: ['es2015', 'react']})
.bundle()
.on('error', gutil.log)
.pipe(source('bundle.js'))
.pipe(gulp.dest('./dist'))
});
gulp.task('watch',function() {
gulp.watch('./src/**/*.js', ['browserify'])
});
看起来您只有 babel-preset-react 安装，您需要执行 npm i babel-preset-es2015 --save-dev 。此外， babelify 和 babel-preset-react 都可以 devDependencies 。
It looks like you only have babel-preset-react installed, you'll need to do npm i babel-preset-es2015 --save-dev. Also babelify and babel-preset-react are fine as devDependencies.
这篇关于将React组件拆分为单独的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
