将React组件拆分成单独的文件

Question

将React组件拆分成单独的文件

3

这似乎是一个常见的问题，我发现很多人都在问这个问题，而回答都不一样，似乎有点靠运气。我观看了各种视频教程、阅读了很多教程和文档，但遗憾的是，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文件，没有错误。但是谷歌浏览器报错：未捕获的 SyntaxError: 非严格模式下不支持块作用域声明（let、const、function和class）。我已经尝试了以下方法，包括其他很多尝试，但都无法回滚操作。请注意保留HTML标记。

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"
}

- Andrew

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dominic · Accepted Answer

你的es6示例导出方式export default Square应该能正常工作。看起来你已经安装了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也是可以的。