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

Question

我认为我在概念上缺少使用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组件的标记被删除,所以我认为这是我的组件的实现问题,但我真的不知道从哪里开始.

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

谢谢

Answer 1

使用服务器渲染时,应始终传递用于在服务器上呈现组件的相同道具.在这种情况下,您需要传递相同的initialItems prop,以便获取React.renderComponent服务器呈现的标记(通过简单地JSONifying道具并将其置于调用中renderComponent).

从指定的initialItems读取的一般结构对我来说是有意义的.这样做允许您创建具有预加载数据的组件或不具有预加载数据的组件.您需要将初始状态设置为取决于您要从头开始渲染全新组件时要显示的内容.(如果你总是拿起服务器渲染的标记,那么你可以简单地传递initialName和initialItems道具.)

希望有道理.