相关疑难解决方法(0)

Facebook React.js:你如何在服务器上呈现statefull组件?

我认为我在概念上缺少使用React.js进行服务器端渲染的东西

假设我想创建一个页面来显示来自服务器端数据库的项目,并使用输入字段来过滤它们.

我想要一个页面:

  • 响应像这样的URL /items?name=foobar
  • 使用React输入字段按名称过滤项目
  • 使用React组件显示已过滤项目的列表

假设我有一个公共REST API来查询客户端的项目.

从概念上讲,我在第一次请求(GET /items?name=foobar)时想要做的是:

  • 我希望我的输入字段显示用户作为参数传递的内容,因此我需要将查询参数('foobar')传递给react组件,作为'prop'(如initialName)

所以我尝试了这个:

 // A stateful component, maintaining the value of a query field
 var ItemForm = React.createClass({
    getInitialState : function () {
        return {
            name : this.props.initialName
        };
    },
    handleInputValueChanged : function() {
        var enteredName = this.refs.query.getDOMNode().value.trim();
        this.props.onNameChanged(enteredName);
    },
    render : function () {

        return React.DOM.form({
            children : [
                React.DOM.label({
                    children : "System name"
                }),
                React.DOM.input({
                    ref : "query",
                    value : this.state.name,
                    onChange : this.handleInputValueChanged …
Run Code Online (Sandbox Code Playgroud)

reactjs isomorphic-javascript

29
推荐指数
1
解决办法
1万
查看次数

标签 统计

isomorphic-javascript ×1

reactjs ×1