node.js - Nodejs + React做后端渲染时，如何绑定事件

Question

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

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

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

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事件并没有生效：

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

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

Answer 1

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

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

Answer 2

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

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

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

Answer 3

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