将 React 组件拆分为单独的文件
Posted
技术标签:
【中文标题】将 React 组件拆分为单独的文件【英文标题】：Splitting React components into separate files 【发布时间】：2016-02-07 23:41:43 【问题描述】：这似乎是一个常见的问题，我发现很多人都在问这个问题，而且回答都非常不同，似乎有点碰巧。我观看了各种视频教程，阅读了大量教程和文档。但可惜的是，React 的发展速度似乎超出了作者的跟上。或者我只是误会了。
我想在一个单独的文件中创建每个组件，这样做是合乎逻辑的。我有 React 工作，但无法弄清楚如何导入和使用其他文件。我不知道这是不是因为 Chrome 在不在网络服务器（本地测试开发）上时不会加载文件，或者我只是做错了。
这是我的 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：
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，这也可以正常工作。
这是我的 square.jsx：
class Square extends React.Component
render()
return (
<p>Square</p>
)
module.exports =
square: Square
;
Babel 创建 bundle.js 很好，没有错误。 Chrome 抛出错误：
未捕获的 SyntaxError：块范围的声明（let、const、function、 class) 在严格模式之外尚不支持
我也尝试了以下正方形，以及许多其他东西，都从撤消队列中丢失了：
import React from 'react';
class Square extends React.Component
render()
return (
<p>Square</p>
)
export default Square;
感谢所有帮助。除了分离类文件之外，React 似乎还有意义。
谢谢。
编辑：
也试过了：
var Component = React;
class Square extends Component
render()
return (
<p>Square</p>
)
window.Square = Square;
如果有帮助，这里是 Gulp 文件：
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：
"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"
【问题讨论】：
【参考方案1】：像export default Square 这样的 es6 导出示例应该可以正常工作。看起来你已经安装了 babelify，但你没有在转换过程中使用它，因此浏览器抱怨你试图在严格模式之外使用 es6 功能。
如果您查看babelify 的说明，它会执行以下操作：
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 使用。
【讨论】：
嗨，谢谢。这给了我错误：import React from 'react'; ^ ParseError: 'import' and 'export' may appear only with 'sourceType: module'
但是我认为这是一个不同的问题，所以我将把你的答案标记为答案。
如果我选择我的 window.Square = Square;我现在得到的方法：(let, const, function, class) not yet supported outside strict mode
@Andrew 看来，作为尝试使用 es6 功能的浏览器，某些东西仍然无法正常工作。您可以将“use strict”放在文件的顶部，但是除了最新的浏览器（支持部分 es6）之外，它不会在很多其他地方工作。我建议你要么尝试让那个 babelify 位工作，要么切换到高级 webpack 捆绑器
@Andrew 看到编辑过的帖子，未经测试，但从我读到的内容来看，希望能正常工作以上是关于将 React 组件拆分为单独的文件的主要内容，如果未能解决你的问题，请参考以下文章
15. react UI组件和容器组件的拆分 及 无状态组件
Parcel：为每个 React 组件使用单独的 SCSS 文件，但使用变量文件