顯示在組件的多個屬性陣營

Question

我是一個初學者，學習使用反應本教程作爲指南>http://survivejs.com/webpack_react/implementing_notes/

我無法理解，並找出如何使購物清單有產品名稱， SKU和價格作爲屬性。我知道如何從教程中傳遞一個屬性，但組件的多個屬性我不確定我做錯了什麼。

我的問題是隻有產品名稱顯示在頁面上。我需要顯示sku和價格，但不瞭解這些不會被傳遞的情況。

我最好的假設是在item.jsx中，它只傳遞產品而不是sku和價格，所以我該怎麼做？

the export default ({product}) => <div>{product}</div>; 

這就是我的組件鋪設。 APP組件>列出組件>列表組件

App.jsx

import uuid from 'node-uuid' 
import React from 'react'; 
import Items from './Items.jsx'; 

export default class APP extends React.Component { 

    constructor(props) { 
    super(props); 

    this.state = { 
     items: [ 
     { 
      id: uuid.v4(), 
      product: 'apples', 
      sku: '1234', 
      price: '23.99' 
     }, 
     { 
      id: uuid.v4(), 
      product: 'oranges', 
      sku: '2345', 
      price: '24.99' 
     }, 
     { 
      id: uuid.v4(), 
      product: 'strawberries', 
      sku: '3456', 
      price: '25.99' 
     } 
     ] 
    }; 
    } 
    render() { 
    const items = this.state.items; 

    return (
     <div> 
     <button onClick={this.addItem}>+</button> 
     <Items items={items} /> 
     </div> 
    ); 
    } 
} 

Items.jsx

import React from 'react'; 
import Item from './item.jsx'; 

export default ({items}) => { 
    return (
    <ul>{items.map(item => 
     <li key={item.id}> 
     <Item 
      product={item.product} 
      sku={item.sku} 
      price={item.price} /> 
     </li> 
    )}</ul> 
); 
} 

Item.jsx

export default ({product}) => <div>{product}</div>; 

Answer 1

您正確地沿着通過性能 - 你可以在你的Items.jsx文件中看到這個：

<Item 
    product={item.product} 
    sku={item.sku} 
    price={item.price} 
/> 

但是，在您的Item.jsx文件中，您並未打印出屬性。這可能是更容易一些，如果你寫你的Item.jsx文件來了解作爲您已寫入了App.jsx文件：

export default class Item extends React.Component { 
    render() { 
    return (
     <div> 
     {this.props.product}, {this.props.sku}, {this.props.price} 
     </div> 
    ) 
    } 
} 

而是把它當作一個函數的特性參數的，你可以參考你的屬性傳遞使用this.props.{propName} - 這是一種更爲廣泛使用的編寫React組件的方式，它看起來像您正在使用的教程繼續使用React道具在頁面的更下方。

Answer 2

您正在使用stateless function component，這是一個接收props作爲參數的函數。實際上，你可以寫這樣的：

export default (props) => (
    <div> 
     <span>{ this.props.product }</span> 
     <span>{ this.props.sku }</span> 
     <span>{ this.props.price }</span> 
    </div>; 
); 

然而，由於ES6支持的對象destructuring assignment，我們可以將道具對象屬性變量：

export default ({ product, sku, price }) => (
    <div> 
     <span>{ product }</span> 
     <span>{ sku }</span> 
     <span>{ price }</span> 
    </div>; 
);