Question

我正在学习ReactJS，并且我遵循了生成此代码的教程：

<!DOCTYPE html>
<html>

<head>
  <title>React! React! React!</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  <script src="https://npmcdn.com/react-router@2.4.0/umd/ReactRouter.min.js"></script>

</head>

 <body>

 <div id="container">
    <div id="content"></div>
 </div>

  <script type="text/babel">
var destination = document.querySelector("#container");

var { Router, Route, IndexRoute, hashHistory, IndexLink, Link } = ReactRouter

var Home = React.createClass({
  render: function() {
      return (
        <div>
          <h2>HELLO</h2>
          <p>Cras facilisis urna ornare ex volutpat, et
          convallis erat elementum. Ut aliquam, ipsum vitae
          gravida suscipit, metus dui bibendum est, eget rhoncus nibh
          metus nec massa. Maecenas hendrerit laoreet augue
          nec molestie. Cum sociis natoque penatibus et magnis
          dis parturient montes, nascetur ridiculus mus.</p>

          <p>Duis a turpis sed lacus dapibus elementum sed eu lectus.</p>
        </div>
      );
    }
});

var Contact = React.createClass({
  render: function() {
      return (
        <div>
          <h2>GOT QUESTIONS?</h2>
          <p>The easiest thing to do is post on
          our
          </p>
        </div>
      );
    }
});

var Stuff = React.createClass({
  render: function() {
      return (
        <div>
          <h2>STUFF</h2>
          <p>Mauris sem velit, vehicula eget sodales vitae,
          rhoncus eget sapien:</p>
          <ol>
            <li>Nulla pulvinar diam</li>
            <li>Facilisis bibendum</li>
            <li>Vestibulum vulputate</li>
            <li>Eget erat</li>
            <li>Id porttitor</li>
          </ol>
        </div>
      );
    }
});

var FourOhFour = React.createClass({
  render: function() {
      return (
        <div>
          <h2>NOPE</h2>
          <p>This page is missing. Maybe it never existed.
          Maybe we never existed. What if nothing is real?</p>
        </div>
      );
    }
});


var App = React.createClass({
  render: function() {
    return (
      <div>
        <h1>Simple SPA</h1>
        <ul className="header">
          <li><IndexLink to="/" activeClassName="active">Home</IndexLink></li>
          <li><Link to="/stuff" activeClassName="active">Stuff</Link></li>
          <li><Link to="/contact" activeClassName="active">Contact</Link></li>
        </ul>
        <div className="content">
          {this.props.children}
        </div>
      </div>
    )
  }
});

ReactDOM.render((
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Home} />
      <Route path="stuff" component={Stuff} />
      <Route path="contact" component={Contact} />
      <Route path='*' component={FourOhFour} />
    </Route>

  </Router>
), destination);
  </script>
</body>

</html>

我的问题是如何将这些组件提取到其他页面？我试过制作一个像：

这样的组件

var React = require('react');

var Stuff = React.createClass({
  render: function() {
  return (
    <div>
      <h2>MORE STUFF!!!!</h2>
      <p>Mauris sem velit, vehicula eget sodales vitae,
      rhoncus eget sapien:</p>
      <ol>
        <li>Nulla pulvinar diam</li>
        <li>Facilisis bibendum</li>
        <li>Vestibulum vulputate</li>
        <li>Eget erat</li>
        <li>Id porttitor</li>
      </ol>
    </div>
  );
}
});

module.exports = Stuff;

然后在我的主文件中尝试：

import Stuff from './stuff.jsx';

但我得到这个错误：

 Uncaught ReferenceError: require is not defined

Answer 1

您需要webpack将用JSX编写的组件转换为JS。然后你可以像

一样导入反应

import React from 'react';

而不是使用require。

示例webpack文件

var webpack = require('webpack');
var path = require('path');

module.exports ={

    context: path.join(__dirname, "src"),
    devtool: "inline-sourcemap",
    entry: "./js/client.js",
    module: {
        loaders: [
            {
                test: /\.js?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015','stage-0'],
                    plugins: ['react-html-attrs', 'transform-decorators-legacy']
                }
            }
        ]
    },
    output: {
        path: __dirname+ "/src",
        filename: "client.min.js"
    }
}

Webpack tutorial link：

使用CDN时如何将reactjs组件移动到单独的页面中

1 个答案: