5.1 KiB
5.1 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d403616f | Review Using Props with Stateless Functional Components | 6 | false | Revisión usando accesorios con componentes funcionales sin estado |
Description
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. Instructions
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
. Tests
tests:
- text: El componente <code>CampSite</code> debe renderizar.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); return mockedComponent.find("CampSite").length === 1; })(), "The <code>CampSite</code> component should render.");'
- text: El componente <code>Camper</code> debe hacer.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); return mockedComponent.find("Camper").length === 1; })(), "The <code>Camper</code> component should render.");'
- text: El componente <code>Camper</code> debe incluir accesorios predeterminados que asignan la cadena <code>CamperBot</code> al <code>name</code> 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 <code>Camper</code> component should include default props which assign the string <code>CamperBot</code> to the key <code>name</code>.");'
- text: El componente <code>Camper</code> debe incluir tipos de prop que requieren que el <code>name</code> prop sea de tipo <code>string</code> .
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 <code>Camper</code> component should include prop types which require the <code>name</code> prop to be of type <code>string</code>.");'
- text: El componente <code>Camper</code> debe contener un elemento <code>p</code> con solo el texto del <code>name</code> prop.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); return mockedComponent.find("p").text() === mockedComponent.find("Camper").props().name; })(), "The <code>Camper</code> component should contain a <code>p</code> element with only the text from the <code>name</code> prop.");'
Challenge Seed
class CampSite extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Camper/>
</div>
);
}
};
// change code below this line
Before Test
var PropTypes = {
string: { isRequired: true }
};
After Test
console.info('after the test');
Solution
// solution required