freeCodeCamp

3.8 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036164	Create a Component with Composition	6	false		Crear un componente con composición

Description

Ahora veremos cómo podemos componer varios componentes de React juntos. Imagina que estás creando una aplicación y has creado tres componentes, una Navbar , un Dashboard y un Footer . Para componer estos componentes juntos, puede crear un componente primario de la App que represente cada uno de estos tres componentes como secundarios . Para representar un componente como un elemento secundario en un componente React, incluya el nombre del componente escrito como una etiqueta HTML personalizada en el JSX. Por ejemplo, en el método de render podrías escribir:

regreso (
<App>
<Navbar />
<Dashboard />
<Pie de página />
</App>
)

Cuando React encuentra una etiqueta HTML personalizada que hace referencia a otro componente (un nombre de componente envuelto en < /> como en este ejemplo), representa el marcado para ese componente en la ubicación de la etiqueta. Esto debería ilustrar la relación padre / hijo entre el componente de la App y la Navbar , el Dashboard y el Footer .

Instructions

En el editor de código, hay un componente funcional simple llamado ChildComponent y un componente React llamado ParentComponent . Componga los dos juntos renderizando el ChildComponent dentro del ParentComponent . Asegúrese de cerrar la etiqueta ChildComponent con una barra diagonal. Nota: ChildComponent se define con una función de flecha ES6 porque es una práctica muy común cuando se usa React. Sin embargo, debes saber que esto es solo una función. Si no está familiarizado con la sintaxis de la función de flecha, consulte la sección de JavaScript.

Tests

tests:
  - text: El componente React debe devolver un único elemento <code>div</code> .
    testString: 'assert((function() { var shallowRender = Enzyme.shallow(React.createElement(ParentComponent)); return shallowRender.type() === "div"; })(), "The React component should return a single <code>div</code> element.");'
  - text: El componente debe devolver dos elementos anidados.
    testString: 'assert((function() { var shallowRender = Enzyme.shallow(React.createElement(ParentComponent)); return shallowRender.children().length === 2; })(), "The component should return two nested elements.");'
  - text: El componente debe devolver el ChildComponent como su segundo hijo.
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ParentComponent)); return mockedComponent.find("ParentComponent").find("ChildComponent").length === 1; })(), "The component should return the ChildComponent as its second child.");'

Challenge Seed

const ChildComponent = () => {
  return (
    <div>
      <p>I am the child</p>
    </div>
  );
};

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>I am the parent</h1>
        { /* change code below this line */ }


        { /* change code above this line */ }
      </div>
    );
  }
};

After Test

console.info('after the test');

Solution

// solution required

3.8 KiB Raw Blame History