ReactJS | Métodos como accesorios

ReactJS es una biblioteca JavaScript front-endpara crear interfaces de usuario escritas y mantenidas por Facebook. Sabemos que todo en ReactJS es un componente y para pasar datos a estos componentes, se utilizan accesorios . Aunque pasar accesorios como este es excelente, seguramente carece de flexibilidad en una aplicación. Por ejemplo, no podemos permitir que el niño se comunique con el padre de esta manera. Sin embargo, esto se puede hacer pasando métodos como accesorios en ReactJS . 

Para usar un método como accesorio, todos los pasos se describen a continuación en orden:

Estructura del proyecto : La estructura de este proyecto se verá así.

Paso 1: para hacer esto, hagamos un nuevo componente llamado ParentComponent.js. Ahora hagamos el diseño básico para un componente de clase en este archivo.

ParentCompnent.js:

import React, { Component } from 'react';
 
class ParentComponent extends Component {
    render() {
        return (
            <div>
                    
            </div>
        )
    }
}
 
export default ParentComponent;

Paso 2: ahora configuremos un estado para saludar a nuestro padre cada vez que se represente este componente, no es necesario configurar un estado, pero lo haremos solo para hacer que la aplicación sea más dinámica. Además, hagamos un evento que emita una alerta cada vez que se represente el componente principal. No olvide vincular el evento para que esta palabra clave no devuelva » indefinido «. 

ParentComponent.js:

import React, { Component } from 'react';
 
class ParentComponent extends Component {
    constructor(props) {
        super(props)
     
        this.state = {
            parentName:'Parent'
        }
 
        this.greetParent = this.greetParent.bind(this)
    }
     
    greetParent() {
        alert(`Hello ${this.state.parentName}`)
    }
 
    render() {
        return (
            <div>
                     
            </div>
        )
    }
}
 
export default ParentComponent;

Paso 3: No olvidemos importar esto en nuestro archivo App.js.

Aplicación.js:

import './App.css';
import React from 'react';
  
// imports component
import ParentComponent from './components/ParentComponent';
  
function App() {
  return (
    <div className="App">
      <h1>-----------METHODS AS PROPS-------------</h1>
      <ParentComponent />
  
    </div>
  );
}
 
export default App;

 
Paso 4: Ahora hagamos un nuevo componente. Llamemos a este ChildComponent . js , y crea un componente funcional simple. Hagamos un botón simple y luego pasemos el método greetingParent() como una propiedad. Esencialmente, el botón debe saludar al padre cuando se hace clic en él.

ChildComponent.js:

import React from 'react';
 
function ChildComponent(props) {
    return (
        <div>
            <button onClick={() => props.greetHandler()}>
             Greet Parent
            </button>   
        </div>
    )
}
 
export default ChildComponent;

 
Paso 5: No olvide importar ChildComponent en ParentComponent . Entonces, el código final para ParentComponent será el siguiente.

ParentComponent.js:

import React, { Component } from 'react';
import ChildComponent from './ChildComponent';
 
class ParentComponent extends Component {
    constructor(props) {
        super(props);
      
        this.state = {
            parentName:'Parent'
        }
  
        this.greetParent = this.greetParent.bind(this)
    }
      
    greetParent() {
        alert(`Hello ${this.state.parentName}`)
    }
  
    render() {
        return (
            <div>
                <ChildComponent greetHandler={this.greetParent}/>
            </div>
        )
    }
}
 
export default ParentComponent;

 
 Producción: