首页 > Nodejs + React做后端渲染时,如何绑定事件

Nodejs + React做后端渲染时,如何绑定事件

以下是React实现的后端组件(click-demo.js),我希望在后端渲染的时候直接绑定onClick事件,避免在前端再次操作,代码如下

var React	= require("react/addons");

var ClickItem	= React.createClass({
	onClick	: function(){
		console.log("Item clicked ~");		  
	},
	render  : function(){
		return (
			<div onClick={this.onClick}>点击这里输出console信息!</div>	
		);		  
	}
});

module.exports = ClickItem;

在路由器中,我通过React.createFactory以及renderToString将组件转化为字符串并渲染到页面中去,如下:

var React			= require("react/addons");
var ClickDemo		= React.createFactory(require("../components/click-demo"));

exports.index	= function(req, res){
	var demo	= React.renderToString(ClickDemo());
	res.render("index/index", { demo : demo });
};

页面上直接通过如下方式在输出内容:

<%- demo %>

但是,问题是,在组件中绑定的onClick事件并没有生效

<div onClick={this.onClick}>点击这里输出console信息!</div>	

是绑定的方式不对,还是本来就不支持这种事件绑定方式,望各位大神指点~


事件绑定和处理是浏览器行为 不可能在后端实现的. 所以必须在浏览器端重新render
react智能的识别服务端render的字符串, 在页面中挂载&渲染的时候,只去做事件绑定.

建议好好去看看文档, 好多问题可以避免.
https://facebook.github.io/react/docs/top-level-api.html#react.rendertostring


我也遇到这个问题,最后你是如何解决的呢?
而且想知道如果用rendertostring的方法,能不能在react中使用ajax呢


后端只会生成HTML String, 所有浏览相关的操作是无法进行的。 E.g. componentDidMount事件不会被触发。

在后端生成HTML String 并 Return 回浏览器端时, 要重新render一次, 但注意这次render要保证有同样的State(如果你用Flux的话, 就是Store里的data 要一样)。在这次浏览器端的render中,会发生事件绑定。

一般情况下, 只需要对‘GET’进行服务器端渲染, 'POST', 'PUT', 'DELETE'这些不太有必要, 完全在客户端处理就行了

【热门文章】
【热门文章】