將React組件拆分為單獨的文件

Question

這似乎是一個常見的問題，我發現很多人都在問它，而且反應都非常不同，似乎有點受到打擊。 我看了各種視頻教程，閱讀了大量的教程和文檔。 但唉，似乎React的速度超過了作家可以跟上的速度。 或者我只是誤會。

我想在一個單獨的文件中創建每個組件，邏輯上這樣做。 我有React工作，但我無法弄清楚如何導入和使用其他文件。 我不知道這是不是因為當不在Web服務器（本地測試開發）上時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"
}

Answer 1

您的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 。

將React組件拆分為單獨的文件

問題描述

1 個解決方案

解決方案1
2 已采納 2015-11-06 18:44:51

將React組件拆分為單獨的文件

問題描述

1 個解決方案

解決方案1 2 已采納 2015-11-06 18:44:51

解決方案1
2 已采納 2015-11-06 18:44:51