reactjs - tutorial - react components

Facebook React.js: ¿cómo se representan los componentes de estado en el servidor?

Question

Creo que conceptualmente me estoy perdiendo algo con la representación del lado del servidor usando React.js

Supongamos que quiero crear una página para mostrar los elementos de una base de datos del lado del servidor, con un campo de entrada para filtrarlos.

Quiero una página:

• que responde a una URL como /items?name=foobar
• con un campo de entrada React para filtrar los elementos por nombre
• con un componente React para mostrar la lista de elementos filtrados

Supongamos que tengo una API de REST pública para consultar los elementos en el lado del cliente.

Conceptualmente, lo que quiero hacer en la primera solicitud ( GET /items?name=foobar ) es:

• Quiero que mi campo de entrada muestre lo que el usuario pasó como Parámetro, por lo que debo pasar el parámetro de consulta (''foobar'') al componente de reacción, como ''prop'' (como initialName )

Así que intenté esto:

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

• También tengo que hacer mi consulta de base de datos en el servidor para obtener una lista de elementos, y pasar esta lista de elementos como un ''prop'' de la Lista de elementos (como ''initialItems'')

Como lo entiendo, necesito un componente simple para mostrar la lista, recibiéndola como un ''prop'':

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

    }
});

• Ahora, necesito un componente que muestre toda la página; este componente deberá mantener el estado de toda la página, es decir, ver el nombre ingresado en el campo y realizar consultas API para actualizar los elementos de la lista. Sin embargo, no entiendo cómo este componente puede tener un "estado inicial" que funcione tanto en el lado del servidor como para su posterior procesamiento en el lado del cliente.

Intenté esto:

 // A statefull 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'' propery 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
            ]
        });
    }
});

Ahí es donde estoy atrapado. Puedo renderizar cosas en el lado del servidor usando algo como

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

Pero cuando intento escribir el javascript del lado del cliente, ¿qué debo hacer? Sé dónde quiero que se rinda mi dominio, pero ¿qué accesorios iniciales debo pasar al componente de reacción?

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

La mayoría de los intentos que he intentado terminan con el DOM ''borrado'' en el lado del cliente, con este mensaje:

React intentó utilizar el marcado de reutilización en un contenedor, pero la suma de comprobación no era válida. Esto generalmente significa que está utilizando la representación del servidor y que el marcado generado en el servidor no era lo que esperaba el cliente. React inyectó un nuevo marcado para compensar lo que funciona, pero ha perdido muchos de los beneficios de la representación del servidor. En cambio, descubra por qué el marcado que se genera es diferente en el cliente o servidor.

Tenga en cuenta que solo se borra el marcado de mi componente ItemList, así que supongo que es un problema de implementación de mi componente, pero realmente no sé por dónde empezar.

¿Estoy en el camino correcto? ¿O me pierdo algo por completo?

Gracias

Answer 1

Cuando use la representación del servidor, siempre debe transmitir los mismos accesorios que utilizó para representar el componente en el servidor. En este caso, debe pasar la misma propiedad initialItems para que React.renderComponent recoja el marcado del servidor (simplemente JSONificando las propiedades y poniéndolo en la llamada a renderComponent ).

Su estructura general de lectura de los artículos iniciales cuando se especifica tiene sentido para mí. Si lo hace, le permite crear un componente con datos precargados o uno que no tenga ninguno. Lo que necesita para establecer el estado inicial depende de lo que desee mostrar en los casos en los que esté mostrando un componente completamente nuevo desde cero. (Si siempre está obteniendo un marcado representado por el servidor, simplemente siempre puede pasar los initialName y initialItems ).

Espero que tenga sentido.