将 React 组件拆分为单独的文件答案

【问题标题】：Splitting React components into separate files将 React 组件拆分为单独的文件
【发布时间】：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"
}

【问题讨论】：

标签： javascript class reactjs components react-jsx

【解决方案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 看到编辑过的帖子，未经测试，但从我读到的内容来看，希望能正常工作