this.props 反应训练问题 - Codecademy

Question

我正在接受 CodeCademy React 初学者培训。我刚刚完成了关于道具和传递道具的简短章节，我对这个话题仍然很困惑，想对此做更多的回顾。 CodeCademy 有以下问题作为“测验”，我提交了答案 - 它告诉我这是错误的并且没有给我解释或解决方案。

有人可以为我回答这个问题，也许可以为我提供一个很好的指南来查看反应道具。

问题：将商品的商品、数量、价格作为道具从 App 组件传递到购物车组件。这些值将在相应的列表元素中呈现。 item 属性应包含字符串“Apple”，数量属性应包含数字 3，价格属性应包含数字 1.99。

import React from 'react';
import ReactDOM from 'react-dom';

export class App extends React.Component {
  render() {
    return (
        <ShoppingCart />
    );
  }
}

export class ShoppingCart extends React.Component {
  render() {
    return <ul>
      <li>Item: {this.props.item}</li>
      <li>Quantity: {this.props.quantity}</li>
      <li>Price: {this.props.price}</li>
      </ul>;
  }

谢谢

Answer 1

如果我理解得很好，购物车应该会有一系列商品，即：<ShoppingCart items={[]} />。然后在购物车中，映射收到的物品。

那么，我认为例外的答案应该是这样的：

import React from 'react';

export class App extends React.Component {
  render() {
    return (
        <ShoppingCart items={[{ item: 'Apple', quantity: 3, price: 1.99 }]} />
    );
  }
}

export class ShoppingCart extends React.Component {
  render() {
    return (
    <div>
      {this.props.items.map(item => (
        <ul key={JSON.stringify(item)}>
          <li>Item: {item.item}</li>
          <li>Quantity: {item.quantity}</li>
          <li>Price: {item.price}</li>
        </ul>))
       }
    </div>
    );
  }

Answer 2

尝试从 App 类渲染组件时，您没有将 props 传递给 ShoppingCart 组件。 执行以下操作，以纠正它 export class App extends React.Component { render() { return ( <ShoppingCart item="Apple" quantity={3} price={1.99} /> ); } }