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. 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
. CampSite
debe renderizar.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); return mockedComponent.find("CampSite").length === 1; })(), "The CampSite
component should render.");'
- text: El componente Camper
debe hacer.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); return mockedComponent.find("Camper").length === 1; })(), "The Camper
component should render.");'
- text: El componente Camper
debe incluir accesorios predeterminados que asignan la cadena CamperBot
al name
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 Camper
component should include default props which assign the string CamperBot
to the key name
.");'
- text: El componente Camper
debe incluir tipos de prop que requieren que el name
prop sea de tipo string
.
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 Camper
component should include prop types which require the name
prop to be of type string
.");'
- text: El componente Camper
debe contener un elemento p
con solo el texto del name
prop.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); return mockedComponent.find("p").text() === mockedComponent.find("Camper").props().name; })(), "The Camper
component should contain a p
element with only the text from the name
prop.");'
```