freeCodeCamp

3.0 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d403616c	Override Default Props	6	false		Anular apoyos predeterminados

Description

La capacidad de establecer accesorios predeterminados es una característica útil en React. La forma de anular los accesorios predeterminados es establecer explícitamente los valores de prop para un componente.

Instructions

El componente ShoppingCart ahora representa un componente secundario Items . Este componente de Items tiene una quantity prop predeterminada establecida en el entero 0 . Anule el prop predeterminado al pasar un valor de 10 por quantity . Nota: recuerde que la sintaxis para agregar una propuesta a un componente es similar a la forma en que agrega atributos HTML. Sin embargo, dado que el valor para la quantity es un número entero, no irá entre comillas, pero debería estar entre corchetes. Por ejemplo, {100} . Esta sintaxis le dice a JSX que interprete el valor entre las llaves directamente como JavaScript.

Tests

tests:
  - text: El componente <code>ShoppingCart</code> debe renderizar.
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find("ShoppingCart").length === 1; })(), "The component <code>ShoppingCart</code> should render.");'
  - text: Los <code>Items</code> componente deben hacer.
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find("Items").length === 1; })(), "The component <code>Items</code> should render.");'
  - text: 'El componente <code>Items</code> debe tener una propiedad de <code>{ quantity: 10 }</code> aprobada desde el componente <code>ShoppingCart</code> .'
    testString: 'getUserInput => assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find("Items").props().quantity == 10 && getUserInput("index").replace(/ /g,"").includes("<Itemsquantity={10}/>"); })(), "The <code>Items</code> component should have a prop of <code>{ quantity: 10 }</code> passed from the <code>ShoppingCart</code> component.");'

Challenge Seed

const Items = (props) => {
  return <h1>Current Quantity of Items in Cart: {props.quantity}</h1>
}

Items.defaultProps = {
  quantity: 0
}

class ShoppingCart extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    { /* change code below this line */ }
    return <Items />
    { /* change code above this line */ }
  }
};

After Test

console.info('after the test');

Solution

// solution required

3.0 KiB Raw Blame History