Question

我是初学者，使用本教程作为指南学习React＆gt; http://survivejs.com/webpack_react/implementing_notes/

我无法理解并弄清楚如何制作一个以产品名称，sku和价格作为属性的购物清单。我知道如何从教程中传递一个属性，但组件的多个属性我不确定我做错了什么。

我的问题是只有产品名称显示在页面上。我需要显示sku和价格，但不了解这些是如何传递的。

我最好的假设是在item.jsx中，它只传递产品而不是sku和价格，所以我该怎么做？

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

这就是我的组件布局的方式。 APP成分＆gt;列表组件＆gt;列表组件

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文件中看到此内容：

import String exposing (some, specific, functions)

但是，在Item.jsx文件中，您不会打印出属性。如果您编写了Item.jsx文件，可能会更容易理解，因为您已经编写了App.jsx文件：

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

您可以使用export default class Item extends React.Component { render() { return ( <div> {this.props.product}, {this.props.sku}, {this.props.price} </div> ) } }引用您传递的属性，而不是将其作为函数的参数传递 - 它是一种更广泛使用的编写React组件的方式，它看起来像是您的教程＃39;重新使用继续在页面下方使用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，我们可以将props对象属性分配给变量：

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

在React中显示组件的多个属性

2 个答案: