3.8 KiB
3.8 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036164 | Create a Component with Composition | 6 | false | Crear un componente con composición |
Description
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 (Cuando React encuentra una etiqueta HTML personalizada que hace referencia a otro componente (un nombre de componente envuelto en
<App>
<Navbar />
<Dashboard />
<Pie de página />
</App>
)
< />
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
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