App
que representa un componente secundario llamado Welcome
que es un componente funcional sin estado. Puede pasar user
propiedad de Welcome
un user
escribiendo: <App>Utiliza los atributos HTML personalizados para los cuales React proporciona soporte para pasar el
<Bienvenido usuario = 'Marcar' />
</App>
user
la propiedad al componente Welcome
. Como Welcome
es un componente funcional sin estado, tiene acceso a este valor así: const Welcome = (props) => <h1> Hola, {props.user}! </h1>Es estándar llamar a este valor
props
y cuando se trata de componentes funcionales sin estado, básicamente lo considera como un argumento de una función que devuelve JSX. Puede acceder al valor del argumento en el cuerpo de la función. Con los componentes de clase, verás que esto es un poco diferente. Calendar
y CurrentDate
en el editor de código. Al representar CurrentDate
desde el componente Calendar
, pase una propiedad de date
asignada a la fecha actual desde el objeto Date
de JavaScript. Luego acceda a este prop
en el componente CurrentDate
, mostrando su valor dentro de las etiquetas p
. Tenga en cuenta que para que prop
valores prop
sean evaluados como JavaScript, deben estar encerrados entre paréntesis, por ejemplo date={Date()}
. Calendar
debe devolver un único elemento div
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().type() === "div"; })(), "The Calendar
component should return a single div
element.");'
- text: El segundo elemento secundario del componente Calendar
debe ser el componente CurrentDate
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().childAt(1).name() === "CurrentDate"; })(), "The second child of the Calendar
component should be the CurrentDate
component.");'
- text: El componente CurrentDate
debe tener una prop llamada date
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().childAt(1).props().date })(), "The CurrentDate
component should have a prop called date
.");'
- text: La date
prop. Del CurrentDate
debe contener una cadena de texto.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); const prop = mockedComponent.children().childAt(1).props().date; return( typeof prop === "string" && prop.length > 0 ); })(), "The date
prop of the CurrentDate
should contain a string of text.");'
- text: El componente CurrentDate
debe representar el valor de la date
prop en la etiqueta p
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.find("p").html().includes(Date().substr(3)); })(), "The CurrentDate
component should render the value from the date
prop in the p
tag.");'
```
The current date is:
{ /* change code above this line */ }