如何在React Express Application的默认布局中包含静态js文件

时间:2017-06-09 14:45:12

标签: javascript reactjs express react-router react-redux

最近,尝试与快递作出反应的冲动让我陷入了一个共同的问题,并且对它不熟悉,让我一无所知。

我有一个带有结构的反应快速应用程序:

    var React = require('react');

    class DefaultLayout extends React.Component {
      render() {
        return (
         <html><head><title>{this.props.title}</title>
      <link href="stylesheets/style.css"  rel="stylesheet" />
    </head>
    <body>
    First Application {this.props.children}
    </body>
    <script src="javascripts/jquery-2.2.4.min.js"></script>
    </html>
  );
  }
}

module.exports = DefaultLayout;

使用默认样式表和脚本渲染视图(默认布局文件 - &gt; Default.jsx)

  var React = require('react');
    var DefaultLayout = require('./layouts/default');

    class FirstPage extends React.Component {
      render() {
        return (
      <DefaultLayout title={this.props.title}>
      </DefaultLayout>
        );
      }
    }
module.exports = FirstPage;

Index.jsx

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { name: 'Ankita',title:'First Page' });
});


module.exports = router;

路线及GT; index.js

var express = require('express');
var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jsx');
app.engine('jsx', require('express-react-views').createEngine());
...
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);
module.exports = app;

第一页正在渲染但脚本似乎没有完成它的工作。我收到警告警告:validateDOMNesting(...):不能作为孩子出现。请参见DefaultLayout&gt; html&gt;脚本。

我的app.js

    ${rowcount}=    Keyword1    Book1.xlsx    0
    ${length}=    Set Variable    ${rowcount}
    ${i}    Set Variable    1
   :FOR    ${rowvalue}    IN RANGE    ${rowcount}
   \    @{columnlist}=    Keyword2    ${rowvalue}

我们如何以包含css文件的方式包含常见的JavaScript?

0 个答案:

没有答案