Question

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

有人可以帮我回答这个问题吗？也许可以为我提供一个很好的指南来回顾一下反应道具。

问题：将道具的商品，数量，价格作为道具从App组件传递到购物车组件。这些值将呈现在相应的列表元素中。商品道具应包含字符串“ 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

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

Answer 2

如果我很好理解，购物车应该期望有一系列商品，即：<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>
    );
  }

this.props反应训练问题-CodeAcademy

2 个答案: