【发布时间】:2015-08-01 18:11:34
【问题描述】:
我正在玩 MartyJS,marty-express 和 react。和以下代码:
import React from "react";
import _ from "lodash";
export default class InputComponent extends React.Component {
constructor(props, context) {
super(props, context);
this.handleClick = _.bind(this.handleClick,this);
this.state = {count: props.initialCount};
}
handleClick() {
this.setState({count: this.state.count + 1});
}
render() {
return (
<div>
<div className="btn btn-primary" onClick={this.handleClick}>
Clicks: {this.state.count}
</div>
</div>
);
}
}
InputComponent.propTypes = { initialCount: React.PropTypes.number };
InputComponent.defaultProps = { initialCount: 0 };
并且像这样简单地呈现在另一个组件内部:
import InputComponent from "./InputComponent";
...
<InputComponent />
组件渲染得很好。我已经尝试了我能找到的大多数示例,遵循将 React.createClass 重构为 es6 的指南,我完全按照教程中的方式进行操作,但它不起作用......
我的预感开始指向 MartyJS,MartyJS 和 Marty-express 应该在服务器端渲染初始页面加载,如果我放入 console.log,我的组件构造函数正在服务器上打印,而不是在客户。我几乎即将完全放弃服务器端渲染的反应,因为似乎有很多相关的细节并且没有关于它的文档。
有人可以谈谈他们的经历吗?也许指向一些使用 MartyJS w/o SSR 的代码?
谢谢
【问题讨论】:
-
我对 Marty.js 不熟悉,但如果你在进行服务器端渲染,你还必须在客户端的组件上调用 render,而不是仅仅将 HTML 转储到 dom 中。否则,您的事件处理程序将不会绑定到元素。执行此操作时,您仍然可以获得服务器端渲染的好处。