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

【问题标题】：Displaying Multiple Properties of a component in React在 React 中显示组件的多个属性
【发布时间】：2016-04-03 01:59:24
【问题描述】：

我是初学者，以本教程为指导学习 React > 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>;

【问题讨论】：

标签： reactjs components

【解决方案1】：

您正确地传递了属性 - 您可以在此处的 Items.jsx 文件中看到这一点：

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

但是，在您的 Item.jsx 文件中，您并没有将属性打印出来。如果您像编写 App.jsx 文件一样编写 Item.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 道具。

【讨论】：

【解决方案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>;
);

【讨论】：