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
                })
            ]
        });
    }
});

我还必须在服务器上进行数据库查询以获取项目列表,并将此项目列表作为ItemList的"prop"传递(如'initialItems')

据我了解,我需要一个简单的组件来显示列表,将其作为"道具"接收:

 // A stateless component, displaying a list of item
 var ItemList = return React.createClass({

    propTypes : {
        items : React.PropTypes.array
    },

    render : function () {
        return React.DOM.ul({
            children : _.map(this.props.items, function (item) {
                return React.DOM.li({
                    children : [
                        React.DOM.span({
                            children : ["Name : ", item.name].join(" ")
                        })]
                });
            })
        });
    }
});

现在,我需要一个组件来显示整个页面; 此组件必须维护整个页面的状态,即查看字段中输入的名称,并进行API查询以更新列表项.但是我不明白这个组件如何具有'initialState',它既可以在服务器端工作,也可以在客户端进行后续渲染.

我试过这个:

 // A stateful react component, maintaining the list of items
 var ItemPage = React.createClass({

    getInitialState : function () {
        // ?????
        // This is where I'm sure the problem lies. 
        // How can this be known both on server and client side ? 
        return {
            items : this.props.initialItems || []
        };
    },
    queryItems : function (enteredName) {

        var self = this;

        // The field was emptied, we must clear everything
        if (!enteredName) {
            this.setState({
                items : []
            });

        } else {

            // The field was changed, we want to do a query
            // then change the state to trigger a UI update. 
            // The query code is irrelevant, I think.
            doQuery(enteredName).then(function (items) {
                self.setState({
                   items : items
                });
            });
        }
    },
    render : function () {

        // I don't want to display the same view
        // if there is no results. 
        // This uses a 'state' property of the page
        var results = null;
        if (_.isEmpty(this.state.items)) {
            results = React.DOM.div({
                ref : "results",
                children : "No results"
            });
        } else {
            results = ItemListView({
                // Here items is a 'prop', the ItemList is technically
                // stateless
                items : this.state.items
            });
        }

        return React.DOM.div({
            children : [
                ItemForm({
                    initialName : this.props.initialName,
                    onNameChanged : this.queryItems
                }),
                results
            ]
        });
    }
});

那就是我被困住的地方.我可以使用类似的东西在服务器端渲染东西

var name = // The name from the query parameters
var items = doQueryOnServerSide(name);
React.renderComponentAsString(ItemPage({
  initialName : name,
  initialItems : items
});

但是当我尝试编写客户端javascript时,我该怎么办？我知道我想要在哪里渲染我的dom,但是我应该将哪些初始道具传递给反应组件？

React.renderComponent(ItemPage({
  initialName : ??? // Read the name parameter from URL ? 
  initialItems : ??? // I don't know yet, and I don't want to make an API call until the user entered something in the input box 
});

我尝试过的大多数尝试最终都会在客户端"删除"DOM,并显示以下消息:

React尝试在容器中使用重用标记,但校验和无效.这通常意味着您正在使用服务器呈现,并且在服务器上生成的标记不是客户端所期望的.React注入了新的标记来补偿哪些有效,但是你已经失去了服务器渲染的许多好处.相反,弄清楚为什么生成的标记在客户端或服务器上是不同的.

请注意,只有我的ItemList组件的标记被删除,所以我认为这是我的组件的实现问题,但我真的不知道从哪里开始.

我是在正确的轨道上吗？或者我完全错过了什么？

谢谢