显示在组件的多个属性阵营

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