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
. 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. div
.
testString: 'assert((function() { var shallowRender = Enzyme.shallow(React.createElement(ParentComponent)); return shallowRender.type() === "div"; })(), "The React component should return a single div
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.");'
```
I am the child