javascript - React JS 从另一个位置导入/需要文件/页面

Question

我一直在寻找一些例子，但没有运气，或者我只是不知道它是什么样子。我想做的是做我在 Rails 或 PHP 中会做的事情 - 所以渲染或包含。我想将不同页面的内容存储在不同的文件中。我知道我可以将它存储在一个文件中，但不建议使用数百行代码......我想在许多文件中保持简短。 (除非 ReactJS 不应该这样构建)

这是我的页面结构:

我如何将projects.js链接到app.js - 并调用它来显示projects.js中的内容

app.js

var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var Link = ReactRouter.Link;
var IndexRoute = ReactRouter.IndexRoute;

var ReactDOM = require('react-dom');
var React = require('react');

var Projects = require('./pages/projects');

var Header = React.createClass({
  render : function() {
    return (
            <div className="navmenu">
              <ul id="menu">
                <li><Link to="/">Home</Link></li>
                <li><Link to="about">About</Link></li>
                <li><Link to="projects">Projects</Link></li>
                <li>News</li>
                <li>Contact</li>
              </ul>
            </div>
        );
  }
});

var Logo = React.createClass({
  render : function() {
    return (
      <div className="logo col-md-4">
        <div>
          <img src="images/logo.png" />
        </div>
      </div>
    );
  }
});

var slide_one = React.createClass({
  render : function() {
    return (
      images/slides/blank.gif
    );
  }
});


var Slides = React.createClass({
  render : function() {
    return (
            <div className="container">
              <div className="row wrap">
                <div className="col-md-12 gallery"> 
                  <div className="camera_wrap camera_white_skin" id="camera_wrap_1">
                    <div data-thumb="" data-src="images/slides/blank.gif">
                      <div className="img-responsive camera_caption fadeFromBottom">
                        <h2>Great cars</h2>
                      </div>
                    </div>
                    <div data-thumb="" data-src="images/slides/blank.gif">
                      <div className="img-responsive camera_caption fadeFromBottom">
                        <h2>Fast cars</h2>
                      </div>
                    </div>
                    <div data-thumb="" data-src="images/slides/blank.gif">
                      <div className="img-responsive camera_caption fadeFromBottom">
                        <h2>Super cars</h2>
                      </div>
                    </div>
                    <div data-thumb="" data-src="images/slides/blank.gif">
                      <div className="img-responsive camera_caption fadeFromBottom">
                        <h2>We have it all!</h2>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
    );
  }
});

var Footer = React.createClass({
  render : function() {
    return (
    <div>
      <div className="line7">
        <div className="container">
          <div className="row footer">
            <div className="col-md-12">

                <br /><br />

              <h3>Subscribe for Our Newsletter!</h3>
              <p>Subscribe to our newsletter email to get notification about fresh news, latest promos, giveaways and free stuff from Skew. Stay always up-to-date!</p>
              <div className="fr">
                <div className="boxCenter">
                  <input className="col-md-6 fEmail" name='Email' placeholder='Enter Your Email'/>
                  <a href="#" className="subS">Subscribe!</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="lineBlack">
        <div className="container">
          <div className="row downLine">
            <div className="col-md-12 text-right">

            </div>
            <div className="col-md-6 text-left copy">
              <p>Copyright; 2016 Cruisin. All Rights Reserved.</p>
            </div>
            <div className="col-md-6 text-right dm">

            </div>
          </div>
        </div>
      </div>
    </div>
    );
  }
});

var Home = React.createClass({
  render : function() {
    return (
            <div className="container">
              <div className="row">
                <div className="col-md-12 cBusiness">
                  <p>Home Page</p>
                  <br />
                  <br />
                </div>
              </div>
            </div>
    );
  }
});

var About = React.createClass({
  render : function() {
    return (
            <div className="container">
              <div className="row">
                <div className="col-md-12 cBusiness">
                  <p>About Page</p>
                  <br />
                  <br />
                </div>
              </div>
            </div>
    );
  }
});

var App = React.createClass({
  render : function() {
    return (
      <div>
        <div id="home">
          <div className="headerLine">
            <div id="menuF" className="default">
              <div className="container">
                <div className="row">

                  <Logo />

                  <Header />
                  <Slides />

                </div>
              </div>
            </div>
          </div>

                  {this.props.children}

        </div>

        <Footer />

      </div>

    )
  }
});

ReactDOM.render((
  <Router >
    <Route path="/" component={App}>
      <IndexRoute component={Home} />
      <Route path="about" component={About} />
      <Route path="projects" component={Projects} />
    </Route>
  </Router>
), document.getElementById('mount-point')) ;

projects.js

var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var Link = ReactRouter.Link;
var IndexRoute = ReactRouter.IndexRoute;

var ReactDOM = require('react-dom');
var React = require('react');

var Projects = React.createClass({
  render : function() {
    return (

            <div className="container">
              <div className="row">
                <div className="col-md-12 cBusiness">

                  <p>Projects Page</p>

                  <br />
                  <br />
                </div>
              </div>
            </div>
    );
  }
});

我几次尝试调用它。我是 JS 新手，但仍然会犯错误。

如何使其工作，或者在 ReactJS 中是否有其他方法可以做到这一点？

如果还有像这样的另一个主题，我深表歉意 - 我真的不知道我想在这里做什么的技术名称。

Answer 1

您需要确保导出项目。将其添加到projects.js 文件module.exports = Projects; 的底部。以及 App.js 中的 var Projects = require('./pages/projects.js');。