web-dev-qa-db-ja.com

React JS：this.props.items.map機能の説明

HTMLコンテンツのレンダリングにReact JSを使用しています。問題は、コードの特定のセクションが何をするのか理解できないことです。

以下のリンクからTodoリストの基本サンプルを見ることができる場合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>

私は基本的にmapが何をするのか、アイテム作成パラメーターがどのように機能するのかを理解できません。誰でも同じ詳細を提供できますか：

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

ありがとう、Ankit

javascripthtml5reactjsreactive-programming
21
Ankit Tanna

mapはReact.jsの機能ではありません。必要な配列でこの関数を呼び出すことができます。そのために MDNのドキュメント を見てください。

基本的に、mapは、配列を変更されたアイテムを持つ別の配列に変換するためのものです。例えば：

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

このような新しい配列を返します：[2,3,4]

この例では、mapを使用して、「string」型の項目を持つ配列をReact.DOM.li要素の配列に変換します。

あなたの例のautorもこのようにしたかもしれません

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;
    }
});
42
Van Coding

propsは、親から子コンポーネントに渡されるプロパティを含むオブジェクトです。

したがって、_props.items_は、配列であるitemsという名前のプロパティです。

props.item.map()は、items配列をlisの配列にマップします。

5
helpermethod

_this.props.items_は配列であり、mapは_callback function_に従って新しい配列を返します。これは最初の引数として提供され、ES6とJSXの使用は簡単です。

<tr> { this.arr.map((obj, i) => <td key={i}> {obj.name} </td>) } </tr>

この例では、_td's_の配列を返します

2
Umair Ahmed

かかる this.props.items配列、各項目をcreateItem関数に渡し、各呼び出しの戻り値の配列を返します。

特にそのコードの場合、this.props.items：

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

マップ呼び出しから次のようなものが得られます。

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