Question

路由中间件是这样的：

app.get('/',function(req,res){
        res.sendfile("index.html");
    });

它呈现我的index.html

<!DOCTYPE html>
<html>
<head>
    <meta charget="utf-8">
    <title>Corate</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

bundle.js由webpack构建。 webpack.config.js中的配置：

module.exports={
    context: __dirname+'/src',
    entry:'./main.js',
    output:{
        path:__dirname+'/static',
        filename:'bundle.js'
    },
    module:{
        loaders:[
        {
            test:/\.png$/,
            loader:'url?limit=10000'
        },
        {
            test:/\.jpg$/,
            loader:'url?limit=10000'
        },
        {
            test:/\.css$/,
            loader:'style!css'
        },
        {  
            test: /\.jsx?$/,
            exclude: /(node_modules)/,
            loader: 'babel',
            query: {
                presets: ['react', 'es2015']
            }
        }
        ]
    }
}

这是条目main.js：

var React=require('react');
var ReactDOM=require('react-dom');
var Content=require('./index').Content;
var style=require('../public/css/style.css');
var google=require('../public/images/btn_sign_in_google.png');

var Main=React.createClass({
    render:function(){
        return (
            <div>
                <div className="page-content">
                    <div id="header" className="homepage">
                        <h3 className="main-logo">Corate</h3>
                        <a href="/auth/google" className="google-login-logo"><img src={google}/></a>
                    </div>
                </div>
                <div className="container">
                    <Content className="homepage-content"/>
                </div>
            </div>
            );
    }
});

ReactDOM.render(<Main style={style}/>,document.getElementById('app'));

现在我想知道如何在中间件中传递一些参数。我使用React渲染视图，使用webpack编译，如何将参数从中间件传递到main.js文件？

Answer 1

您应该使用模板引擎（例如Jade）才能将parameters传递到javascript global variable视图中的dashboard：

doctype html
html
  head
    meta(charget='utf-8')
    title Corate
    script(type='text/javascript', src='https://code.jquery.com/jquery-2.2.0.min.js')
    script(type='text/javascript', src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js')
    link(rel='stylesheet', type='text/css', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css')
    link(rel='stylesheet', type='text/css', href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css')
  body
    #app
    script(type='text/javascript').
      var __list = #{list.data};
      var __user = #{user};
    script(type='text/javascript', src='bundle.js')

在JSX代码中：

var React=require('react');
var ReactDOM=require('react-dom');
var Content=require('./index').Content;
var style=require('../public/css/style.css');
var google=require('../public/images/btn_sign_in_google.png');

var Main=React.createClass({
    render:function(){
        return (
            <div>
                <div className="page-content">
                    <div id="header" className="homepage">
                        <h3 className="main-logo">Corate</h3>
                        <a href="/auth/google" className="google-login-logo"><img src={google}/></a>
                    </div>
                </div>
                <div className="container">
                    <Content className="homepage-content"> 
                    {__list}
                    {__user}
                    <Content />
                </div>
            </div>
            );
    }
});

ReactDOM.render(<Main style={style}/>,document.getElementById('app'));

链接： Using template engines with express

通过Express路由将参数传递给React

1 个答案: