componentWillReceiveProps()
que se llama cuando un componente recibe nuevos accesorios. Este método recibe las nuevas propuestas como un argumento, que generalmente se escribe como nextProps
. Puede usar este argumento y comparar con this.props
y realizar acciones antes de que se actualice el componente. Por ejemplo, puede llamar a setState()
localmente antes de que se procese la actualización. Otro método es componentDidUpdate()
, y se llama inmediatamente después de que un componente se vuelve a procesar. Tenga en cuenta que la representación y el montaje se consideran cosas diferentes en el ciclo de vida del componente. Cuando se carga una página por primera vez, todos los componentes se montan y aquí es donde se llaman los métodos, por ejemplo, componentWillMount()
y componentDidMount()
. Después de esto, a medida que cambia el estado, los componentes se vuelven a representar. El próximo reto lo cubre con más detalle. Dialog
componente hijo recibe message
de texto de su elemento principal, el componente Controller
. Escriba el método componentWillReceiveProps()
en el componente Dialog
y this.props
que registre this.props
y nextProps
en la consola. Deberá pasar nextProps
como un argumento a este método y, aunque es posible nombrarlo de alguna manera, nextProps
nombre nextProps
aquí. A continuación, agregue componentDidUpdate()
en el componente de Dialog
, y registre una declaración que indique que el componente se ha actualizado. Este método funciona de manera similar a componentWillUpdate()
, que se proporciona para usted. Ahora haga clic en el botón para cambiar el mensaje y ver la consola de su navegador. El orden de las sentencias de la consola muestra el orden en que se llaman los métodos. Nota: Deberá escribir los métodos del ciclo de vida como funciones normales y no como funciones de flecha para pasar las pruebas (tampoco hay ninguna ventaja al escribir métodos de ciclo de vida como funciones de flecha). Controller
debe representar el componente Dialog
como un elemento secundario.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Controller)); return mockedComponent.find("Controller").length === 1 && mockedComponent.find("Dialog").length === 1; })(), "The Controller
component should render the Dialog
component as a child.");'
- text: El método componentWillReceiveProps
en el componente Dialog
debe registrar this.props
en la consola.
testString: 'assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.componentWillReceiveProps.toString().replace(/ /g,""); return lifecycleChild.includes("console.log") && lifecycleChild.includes("this.props") })(), "The componentWillReceiveProps
method in the Dialog
component should log this.props
to the console.");'
- text: El método componentWillReceiveProps
en el componente Dialog
debe registrar nextProps
en la consola.
testString: 'assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.componentWillReceiveProps.toString().replace(/ /g,""); const nextPropsAsParameterTest = /componentWillReceiveProps(| *?= *?)(\(|)nextProps(\)|)( *?=> *?{| *?{|{)/; const nextPropsInConsoleLogTest = /console\.log\(.*?nextProps\b.*?\)/; return ( lifecycleChild.includes("console.log") && nextPropsInConsoleLogTest.test(lifecycleChild) && nextPropsAsParameterTest.test(lifecycleChild) ); })(), "The componentWillReceiveProps
method in the Dialog
component should log nextProps
to the console.");'
- text: El componente Dialog
debe llamar al método componentDidUpdate
y registrar un mensaje en la consola.
testString: 'assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.componentDidUpdate.toString().replace(/ /g,""); return lifecycleChild.length !== "undefined" && lifecycleChild.includes("console.log"); })(), "The Dialog
component should call the componentDidUpdate
method and log a message to the console.");'
```