ReactDOM.render(componentToRender, targetNode)
. El primer argumento es el componente React que desea procesar. El segundo argumento es el nodo DOM en el que desea procesar ese componente. Los componentes de React se pasan a ReactDOM.render()
un poco diferente a los elementos JSX. Para los elementos JSX, pasa el nombre del elemento que desea representar. Sin embargo, para los componentes React, debe usar la misma sintaxis como si estuviera representando un componente anidado, por ejemplo, ReactDOM.render(<ComponentToRender />, targetNode)
. Utilice esta sintaxis para los componentes de clase ES6 y los componentes funcionales. Fruits
y Vegetables
se definen para usted detrás de escena. Procese ambos componentes como elementos TypesOfFood
componente TypesOfFood
, a continuación, procese TypesOfFood
al DOM. Hay un div
con id='challenge-node'
disponible para que lo uses. TypesOfFood
debe devolver un único elemento div
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().type() === "div"; })(), "The TypesOfFood
component should return a single div
element.");'
- text: El componente TypesOfFood
debe representar el componente Fruits
después del elemento h1
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(1).name() === "Fruits"; })(), "The TypesOfFood
component should render the Fruits
component after the h1
element.");'
- text: El componente TypesOfFood
debe representar el componente Vegetables
después de Fruits
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(2).name() === "Vegetables"; })(), "The TypesOfFood
component should render the Vegetables
component after Fruits
.");'
- text: El componente TypesOfFood
debe representar en el DOM dentro del div
con el id challenge-node
.
testString: 'assert((function() { const html = document.getElementById("challenge-node").childNodes[0].innerHTML; return (html === "TypesOfFood
component should render to the DOM within the div
with the id challenge-node
.");'
```