freeCodeCamp

5.1 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d403616f	Review Using Props with Stateless Functional Components	6	false		Revisión usando accesorios con componentes funcionales sin estado

Description

A excepción del último desafío, ha estado pasando apoyos a componentes funcionales sin estado. Estos componentes actúan como funciones puras. Aceptan props como entrada y devuelven la misma vista cada vez que se pasan los mismos props. Puede que se pregunte qué es el estado, y el próximo desafío lo cubrirá con más detalle. Antes de eso, aquí hay una revisión de la terminología de los componentes. Un componente funcional sin estado es cualquier función que escriba que acepte props y devuelva JSX. Un componente sin estado , por otro lado, es una clase que extiende React.Component , pero no usa el estado interno (cubierto en el próximo desafío). Finalmente, un componente con estado es cualquier componente que mantiene su propio estado interno. Es posible que vea los componentes con estado referidos simplemente como componentes o componentes React. Un patrón común es tratar de minimizar la falta de estado y crear componentes funcionales sin estado siempre que sea posible. Esto ayuda a incluir la administración de su estado en un área específica de su aplicación. A su vez, esto mejora el desarrollo y el mantenimiento de su aplicación al hacer que sea más fácil seguir cómo los cambios de estado afectan su comportamiento.

Instructions

El editor de código tiene un componente CampSite que procesa un componente Camper como un elemento secundario. Defina el componente Camper y asígnele accesorios predeterminados de { name: 'CamperBot' } . Dentro del componente Camper , genere el código que desee, pero asegúrese de tener un elemento p que incluya solo el valor del name que se pasa como prop . Finalmente, defina propTypes en el componente Camper para requerir que se proporcione un name como prop y verifique que sea de tipo string .

Tests

tests:
  - text: El componente <code>CampSite</code> debe renderizar.
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); return mockedComponent.find("CampSite").length === 1; })(), "The <code>CampSite</code> component should render.");'
  - text: El componente <code>Camper</code> debe hacer.
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); return mockedComponent.find("Camper").length === 1; })(), "The <code>Camper</code> component should render.");'
  - text: El componente <code>Camper</code> debe incluir accesorios predeterminados que asignan la cadena <code>CamperBot</code> al <code>name</code> la clave.
    testString: 'getUserInput => assert((function() { const noWhiteSpace = getUserInput("index").replace(/\s/g, ""); const verify1 = "Camper.defaultProps={name:\"CamperBot\"}"; const verify2 = "Camper.defaultProps={name:"CamperBot"}"; return (noWhiteSpace.includes(verify1) || noWhiteSpace.includes(verify2)); })(), "The <code>Camper</code> component should include default props which assign the string <code>CamperBot</code> to the key <code>name</code>.");'
  - text: El componente <code>Camper</code> debe incluir tipos de prop que requieren que el <code>name</code> prop sea de tipo <code>string</code> .
    testString: 'getUserInput => assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); const noWhiteSpace = getUserInput("index").replace(/\s/g, ""); const verifyDefaultProps = "Camper.propTypes={name:PropTypes.string.isRequired}"; return noWhiteSpace.includes(verifyDefaultProps); })(), "The <code>Camper</code> component should include prop types which require the <code>name</code> prop to be of type <code>string</code>.");'
  - text: El componente <code>Camper</code> debe contener un elemento <code>p</code> con solo el texto del <code>name</code> prop.
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); return mockedComponent.find("p").text() === mockedComponent.find("Camper").props().name; })(), "The <code>Camper</code> component should contain a <code>p</code> element with only the text from the <code>name</code> prop.");'

Challenge Seed

class CampSite extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <Camper/>
      </div>
    );
  }
};
// change code below this line

Before Test

var PropTypes = {
   string: { isRequired: true }
};

After Test

console.info('after the test');

Solution

// solution required

5.1 KiB Raw Blame History