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

这似乎是一个常见问题，我发现很多人问这个问题，反应都非常不同，似乎有点碰巧和错过。我看过各种视频教程，阅读大量教程和文档。但是，唉，看起来React比作家能够跟上的速度更快。或者我只是误解。将React组件分割成单独的文件

我想创建每个组件在一个单独的文件，在逻辑上这样做。我有React工作，但我无法解决如何导入和使用其他文件。我不知道这是否是因为Chrome不会在Web服务器（本地测试开发）上加载文件，或者我只是想解决这些问题。

这里是我的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.jsx：

class Square extends React.Component{ 
    render() { 
     return (
      <p>Square</p> 
     ) 
    } 
} 

module.exports = { 
    square: Square 
};

巴贝尔创造bundle.js罚款，没有错误。铬引发错误：

Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

我曾尝试以下也为方形，与许多其他的东西一起，全部由撤消队列丢失：

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;

如果它帮助这里是咕嘟咕嘟文件：

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

来源

2015-11-06 Andrew

您的es6出口示例g像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。

来源

2015-11-06 18:44:51

嗨，谢谢。这给了我错误：'从'反应'导入反应; ^ ParseError：'导入'和'导出'可能只与'sourceType：module''出现 – Andrew

但是我认为这是一个不同的问题，所以我打算将答案标记为答案。 – Andrew

如果我去我的window.Square = Square;方法我现在得到：'（let，const，function，class）在严格模式外尚未支持' – Andrew

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

回答

相关问题