将 React 类移动到单独的文件中答案

【问题标题】：Moving React classes into separate files将 React 类移动到单独的文件中
【发布时间】：2015-08-30 21:50:01
【问题描述】：

在完成React tutorial 之后，这是我的 index.html 文件：

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script src="lib/main.js"></script>
  </body>
</html>

这是我的 src/main.jsx 文件：

var CommentBox = React.createClass({
  getInitialState: function() {
    return {data: []};
  },
  loadCommentsFromServer: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  handleCommentSubmit: function(comment) {
    var comments = this.state.data;
    var newComments = comments.concat([comment]);
    this.setState({data: newComments});

    $.ajax({
      url: this.props.url,
      dataType: 'json',
      type: 'POST',
      data: comment,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  componentDidMount: function() {
    this.loadCommentsFromServer();
    setInterval(this.loadCommentsFromServer, this.props.pollInterval);
  },
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments Yo</h1>
        <CommentForm onCommentSubmit={this.handleCommentSubmit} />
        <CommentList data={this.state.data} />
      </div>
    );
  }
});

var CommentForm = React.createClass({
  handleSubmit: function(e) {
    e.preventDefault();
    var author = React.findDOMNode(this.refs.author).value.trim();
    var text = React.findDOMNode(this.refs.text).value.trim();
    if (!text || !author) {
      return;
    }

    // send request to the server
    this.props.onCommentSubmit({author: author, text: text});
    React.findDOMNode(this.refs.author).value = '';
    React.findDOMNode(this.refs.text).value = '';
    return;
  },
  render: function() {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Your name" ref="author" />
        <input type="text" placeholder="Say something..." ref="text" />
        <input type="submit" value="Post" />
      </form>
    );
  }
});

var CommentList = React.createClass({
  render: function() {
    var commentNodes = this.props.data.map(function (comment) {
      return (
        <Comment author={comment.author}>
          {comment.text}
        </Comment>
      );
    });
    commentNodes.reverse();
    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
});

var Comment = React.createClass({
  render: function() {
    var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
        <hr />
      </div>
    );
  }
});

React.render(
  <CommentBox url="comments.json" pollInterval={2000} />,
  document.getElementById('content')
);

另外，我正在运行这个命令来把我的 jsx 变成 js：

babel --watch src/ --out-dir lib/

我想将每个 React 类移动到它自己的文件中。例如，我想创建以下四个文件（注意：每个文件都映射到我的 main.jsx 文件中的顶级“var”声明）并将所有这些类拉到我的 main.jsx 文件中：

comment.jsx
commentList.jsx
commentForm.jsx
commentBox.jsx

我该怎么做？

在这里敲了一阵 require 和 es6 之后，我仍然没有很好的直觉来了解如何将所有这些分开，或者像 require / es6 这样的东西是否是解决这个问题的正确方法。

感谢您的帮助！

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

在使用create-react-app 工具分离组件创建的项目中似乎可以正常工作。在文件Hello.jsx中定义组件：

import React from 'react';

var Hello = React.createClass({
  render: function() {
    return (
      <p>Hello world!</p>
    );
  }
});

// Must export!
export default Hello;

然后你可以在另一个文件中导入组件

import Hello from './Hello.jsx'

【讨论】：

有时最简单的答案就是最好的答案。我在使用 create-react-app 时遇到了同样的问题，你告诉我我需要在模块名称的开头使用“./”来导入它。
应该是公认的答案。简短，简单，无需使用额外的花里胡哨。
export default class MyClass extends Component {...} 为我工作，没有任何额外的变量。
对我来说这很好，除了我需要使用Hello.js 而不是Hello.jsx。

【解决方案2】：

如果您想为每个 React 类创建一个文件，我建议您查看webpack。您可以将 React 类开发为 CommonJs 模块，它将负责将它们捆绑在一起。

另外，我认为这是一个不错的选择，因为您想使用 babel 来转换您的 jsx 文件。这可以通过webpack loaders 解决。

基本的 webpack 配置文件将包含如下内容：

webpack.config.js

var webpack = require('webpack');

module.exports = {
  entry: './src/main.jsx',
  output: {
    // Output the bundled file.
    path: './lib',
    // Use the name specified in the entry key as name for the bundle file.
    filename: 'main.js'
  },
  module: {
    loaders: [
      {
        // Test for js or jsx files.
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel'
      }
    ]
  },
  externals: {
    // Don't bundle the 'react' npm package with the component.
    'react': 'React' 
  },
  resolve: {
    // Include empty string '' to resolve files by their explicit extension
    // (e.g. require('./somefile.ext')).
    // Include '.js', '.jsx' to resolve files by these implicit extensions
    // (e.g. require('underscore')).
    extensions: ['', '.js', '.jsx']
  }
};

如果您想拥有实际代码，我创建了一个 GitHub react-tutorial-webpack 存储库。

【讨论】：

这很完美！感谢您的教程的 github 链接。正是这样的答案让我爱上了 Stack Overflow。

【解决方案3】：

在我看来，ES6 可以成为编写类和模块的一种方式，但不能真正管理它们。出于管理模块的目的，我会使用我所知道的最简单的模块管理器 requirejs。但也许其他人会提出其他建议。

IMO 你需要一个模块管理器，而 requirejs 是一个很好的工具。

更新：基本上，对于 requirejs，您将编写一个 main.js 文件（这是一个用于 require 的 conf 文件，定义模块的路径和要加载的第一个内容）在您的主 html 中，您将编写类似这样的内容来加载 main.js

<script data-main="scripts/main" src="scripts/require.js"></script>

在您的视图中，您将使用您之前在 main.js 中定义的名称（带有路径）使用 define('MyModule'...) 调用您需要的模块。

阅读文档，别担心，这并不可怕： http://requirejs.org/docs/start.html#add 这是一个简单的例子： https://github.com/volojs/create-template

破坏代码的方法非常简单，您将返回（这就是您使用 define() 导出模块的方式）您的 reactclass。 为每个班级创建一个文件。但您也可以创建模块/工具来收集横向函数（解析...等）。

希望对你有帮助！

【讨论】：

告诉你！你能发一份关于如何使用 require 和分离这些类的 sn-p 吗？
这里的例子github.com/volojs/create-template 非常简单，足以指导您了解require 的基础知识。