web-dev-qa-db-fra.com

Réagissez JS: explication de la fonctionnalité this.props.items.map

J'utilise React JS pour le rendu du contenu HTML. Le problème est que je ne suis pas en mesure de comprendre une section de code particulière.

Si vous pouvez voir un exemple de base d’une liste à faire à partir du lien ci-dessous http://facebook.github.io/react/

<script type='text/jsx'>
        /** @jsx React.DOM */ 

        var TodoList = React.createClass({
                render: function(){ 
                        var createItem = function(itemText) {
                          return <li>{itemText}</li>;
                        };
                        return <ul>{this.props.items.map(createItem)}</ul>;
                    }
            });

        var TodoApp = React.createClass({
                getInitialState: function(){
                    return {items:[], text: ''}
                },
                onChange: function(e)
                {
                    this.setState({text: e.target.value});
                },
                handleSubmit: function(e)
                {
                    e.preventDefault();
                    var nextItems = this.state.items.concat([this.state.text]);
                    var nextText = ''
                    this.setState({items: nextItems, text: nextText});
                },
                render:function(){
                    return (
                        <div>
                            <h3>ToDo List</h3>
                            <TodoList items={this.state.items}/>
                            <form onSubmit={this.handleSubmit}>
                                <input type="text" onChange={this.onChange} value={this.state.text}/>
                                <button>Add #{this.state.items.length+1}</button>
                            </form> 
                        </div>
                    )
                }
            });

        React.render(<TodoApp />, document.getElementById('toDoListApp'));
    </script>

Je ne suis fondamentalement pas en mesure de comprendre ce que fait map et comment fonctionnent les paramètres de création d’éléments. Quelqu'un pourrait-il fournir des détails sur le même sujet:

var TodoList = React.createClass({
                    render: function(){ 
                            var createItem = function(itemText) {
                              return <li>{itemText}</li>;
                            };
                            return <ul>{this.props.items.map(createItem)}</ul>;
                        }
                });

Merci, Ankit

javascripthtml5reactjsreactive-programming
18
Ankit Tanna

map n'est pas une fonctionnalité de React.js. Vous pouvez appeler cette fonction sur le tableau de votre choix. Vous devriez consulter sa documentation sur MDN pour cela.

Fondamentalement, map sert à convertir un tableau en un autre tableau avec des éléments modifiés . Par exemple:

[1,2,3].map(function(item){
    return item+1;
})

retournerait un nouveau tableau comme ceci: [2,3,4]

Dans votre exemple, map est utilisé pour convertir un tableau avec des éléments de type "chaîne" en un tableau d'éléments React.DOM.li.

L’auteur de votre exemple aurait également pu le faire comme ceci

var TodoList = React.createClass({
    render: function(){
        return <ul>{this.createItems(this.props.items)}</ul>;
    },
    createItems: function(items){
        var output = [];
        for(var i = 0; i < items.length; i++) output.Push(<li>{items[i]}</li>);
        return output;
    }
});
40
Van Coding

props est un objet contenant des propriétés passées d'un parent à un composant enfant.

Donc props.items est la propriété nommée items qui est un tableau.

props.item.map() mappe la items arrary à un tableau de lis. 

5
helpermethod

Il faudra this.props.items tableau, transmettre chaque élément à la fonction createItem, puis renvoyer un tableau des valeurs renvoyées de chaque appel.

Spécifiquement pour ce code, si vous aviez ceci dans this.props.items:

["Item 1 text", "Item 2 text", ..]

Vous obtiendrez quelque chose comme ça de l'appel de la carte:

["<li>Item 1 text</li>","<li>Item 2 text</li>",..]
2
Briguy37