Reactjs 此.props反应训练问题-CodeAcademy

我正在接受初级训练。我刚刚完成了一个关于道具和传球道具的简短章节，我对这个话题仍然很困惑，我想再做一些复习。CodeCademy将下面的问题作为一个“测验”，我提交了我的答案-它告诉我这是错误的，没有给我解释或解决方案

请有人帮我回答这个问题，也许能给我一个很好的指导来复习react道具

问题：将物品、数量、价格作为道具从应用程序组件传递到购物车组件。这些值将在相应的列表元素中呈现。item属性应该包含字符串“Apple”，quantity属性应该包含数字3，price属性应该包含数字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>;
  }

从“React”导入React；
从“react dom”导入react dom；
导出类应用程序扩展React.Component{
render（）{
返回(
);
}
}
导出类ShoppingCart扩展React.Component{
render（）{
返回

项目：{this.props.Item}
数量：{this.props.Quantity}
价格：{this.props.Price}
；
}

---

谢谢

在尝试从App类渲染时，您没有将道具传递给

ShoppingCart

组件。 执行以下操作，以更正它

导出类应用程序扩展React.Component{
render（）{
返回(
);
}
}

尝试从App类渲染时，您没有将道具传递给

ShoppingCart

组件。 执行以下操作，以更正它

导出类应用程序扩展React.Component{
render（）{
返回(
);
}
}

如果我理解得很好，购物车应该会有一个项目数组，即：

。然后在购物车内，您映射收到的项目

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

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

从“React”导入React；
导出类应用程序扩展React.Component{
render（）{
返回(
);
}
}
导出类ShoppingCart扩展React.Component{
render（）{
返回(
{this.props.items.map（item=>(

项目：{Item.Item}
数量：{item.Quantity}
价格：{item.Price}
））
}
);
}

如果我理解得很好，购物车应该会有一个项目数组，即：

。然后在购物车内，您映射收到的项目

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

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

从“React”导入React；
导出类应用程序扩展React.Component{
render（）{
返回(
);
}
}
导出类ShoppingCart扩展React.Component{
render（）{
返回(
{this.props.items.map（item=>(

项目：{Item.Item}
数量：{item.Quantity}
价格：{item.Price}
））
}
);
}

你应该做这个

或者这个

很有效。我真的很感谢你的帮助。购物车实际上应该有一个物品清单……你应该做这个

或者这个

很有效。我真的很感谢你的帮助。购物车实际上应该有一个物品清单……Uggg，那就是这就是我输入的代码。除了我在3&1.99中使用了“”之外。我希望Codecade我的web浏览器有一个内置的调试器。也许我会设置一个本地IDE，这样我就不会遇到语法错误。谢谢你，实际上，根据CodeCademy，上面的代码不起作用..但是它起作用了。Uggg，这就是我输入的代码。除了我使用了“”超过3&1.99。我希望CodeCademy我的web浏览器有一个内置的调试器。也许我会设置一个本地IDE，这样我就不会遇到语法错误。非常感谢，根据CodeCademy，上面的代码不起作用。但这确实起到了作用。