路由中间件是这样的:
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 渲染 View ，使用 webpack 编译，如何将参数从中间件传递到该 main.js 文件？
最佳答案
您应该使用模板引擎(例如 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'));
关于javascript - 通过 Express 路由向 React 传递参数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35499908/