this.props реагирует на учебный вопрос - CodeAcademy - PullRequest
Новая
       4

this.props реагирует на учебный вопрос - CodeAcademy

0 голосов
/ 03 апреля 2020

Я прохожу обучение на CodeCademy React для начинающих. Я только что закончил небольшую главу о реквизите и прохождении реквизита, и я все еще очень озадачен топи c и хотел бы еще кое-что рассмотреть. У 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>;
  }

Спасибо

Ответы [ 2 ]

1 голос
/ 03 апреля 2020

Если я правильно понимаю, в корзине покупок должен быть массив товаров ie: <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>
    );
  }
1 голос
/ 03 апреля 2020

Вы не передаете реквизит компоненту ShoppingCart, когда пытаетесь отобразить его из класса App. сделайте ниже, чтобы исправить это export class App extends React.Component { render() { return ( <ShoppingCart item="Apple" quantity={3} price={1.99} /> ); } }

...