上一篇文章中，我們學到了在React的世界中，一切都是由元件組成的，也在基於這樣概念中把TodoList基本上需要的元件框出來，接下來在這篇文章中我們將實作TodoItems的部分，順便學習React中元件與元件資料傳遞的方法。

除非我們做的都是純靜態的頁面，否則在前端處理資料一定會是一個重要的議題，在React中，對於資料的處理或傳遞有兩個主要的屬性：props和state。而props就是用來作為元件與元件之間傳遞資料的媒介。

關於props

props主要用來在元件與元件之前傳遞資料，例如我們希望在TodoList元件中，將要顯示的資料傳給TodoItems元件，那麼我們可以將原本TodoList元件中的render方法內容寫成這樣：

var TodoList = React.createClass({
    render: function() {
        var todoItems = [
                { id: 1, data: "Item 1" },
                { id: 2, data: "Item 2" }];
        return (
            <div className="todoList">
                <h1>我是一個TodoList容器</h1>
                <h2>我組合了TodoItems以及AddTodoForm兩個元件</h2>
                <TodoItems items={todoItems}/>
                <AddTodoForm />
            </div>
        );
    }
});

在這邊我們可以看到render方法中我們宣告了一個todoItems變數，然後將它傳到TodoItems的items屬性裡面，而要將變數內容傳到React的元件屬性中，則必須用**大誇號{}**包起來。

而在TodoItems元件中，傳進來的todoItems就會放到this.props.items裡面，提供給元件內部使用，其中items就是要接收從外部傳來資料的參數屬性，因此我們的TodoItems元件程式碼就會變成這樣：

var TodoItems = React.createClass({
    render: function() {
        var displayItems = this.props.items.map(function(item) {
            return (<li key={item.id}>{item.data}</li>);
        });

        return (
            <div>
                <ul>
                    {displayItems}
                </ul>
            </div>
        );
    }
});

在TodoItems的render方法中，我們透過this.props.items取得items參數的陣列內容，再利用map方法將它轉換為我們要顯示的HTML(JSX)語法，在這裡可以看到我們指定了key這個屬性，因為在React中要以陣列方式顯示的資料，都必須給定一個unique的key，當React將資料轉為顯示的View時會依據這些key給予每個html element不重複的id，如此一來當資料變更時，React就有足夠的依據知道哪些資料需要被變更而那些不需要。

{% note info %} 如果對於key的解釋不是很清楚，現階段只需要知道對於列舉資料的顯示，一定要給一個不可重複的key就對了。 {% endnote %}

現在TodoItems元件已經可以正常顯示要呈現的資料了，我們可以打開瀏覽器看到目前開發的成果：

可以看到我們的TodoItems元件正確的顯示我們所傳入的兩筆資料，此時若我們打開瀏覽器的開發人員工具(F12)，就可以看到這兩筆資料都會依照我們給定的key來產生對應的id，這裡以Google Chrome的開發人員工具顯示為範例：

使用this.props.children取得節點裡的內容

到目前為止我們已經完成TodoItems的邏輯了，假設我們的

var TodoItems = React.createClass({
    render: function() {
        var displayItems = this.props.items.map(function(item) {
            // return (<li key={item.id}>{item.data}</li>);
            return (<TodoItem key={item.id}>{item.data}</TodoItem>);
        });

        return (
            <div>
                <ul>
                    {displayItems}
                </ul>
            </div>
        );
    }
});

var TodoItem = React.createClass({
    render: function(){
        return (<li key={this.props.key}>{this.props.children}</li>);
    }
})