我正在学习使用 react.js 并且在使用事件处理程序时遇到了一些问题。最后一个问题是：是否可以使用服务器端渲染并自动向客户端发送事件处理程序？

这是我的示例：我有一个 index.jsx，我渲染服务器端并发送到客户端

var React = require("react");
var DefaultLayout = require("./layout/default");

var LikeButton = React.createClass({
  getInitialState: function() {
    return {liked: false}; 
  }, 
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  }, 
  render: function() {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      <p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>
    );
  } 
});

var IndexComponent = React.createClass({
   render: function(){
       return (
           <DefaultLayout title={this.props.name}>
                <div>
                        <h1>React Test</h1>
                </div>

                <div id="testButton">
                    <LikeButton/>
                </div> 

                <script type="text/babel" src="/js/react.js"></script>
           </DefaultLayout>
       )
   }   
});

但是“赞按钮”没有任何交互。为了让它在点击时做一些事情，我必须添加这个代码客户端。

var LikeButton = React.createClass({
  getInitialState: function() {
    return {liked: false};
  },
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      <p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>
    );
  }
});

ReactDOM.render(
  <LikeButton />,
  document.getElementById('testButton')
);

我只是从 react.js 开始的，也许我只是在这里遗漏了一些主要概念。但是为什么 react.js 在呈现页面服务器端时不只是创建代码（我现在必须手动添加到客户端）？像这样，我有多余的代码，感觉这在更大的应用程序中会变得一团糟。至少 react.js 足够聪明，不会绘制两个 LikeButton，而是将创建的服务器端“绑定”到客户端组件。