renderizar - ReactJS-Llamar a un método de componente de otro componente

react js ejemplos

Question

Tengo dos componentes. Quiero llamar a un método del primer componente del segundo componente. ¿Cómo puedo hacerlo?

Aquí está mi código.

Primer componente

class Header extends React.Component{

    constructor(){
        super();
    }

    checkClick(e, notyId){
       alert(notyId);
    }
}

export default Header;

Segundo componente

class PopupOver extends React.Component{

    constructor(){
        super();
        // here i need to call Header class function check click....
        // How to call Header.checkClick() from this class
    }

    render(){
        return (
            <div className="displayinline col-md-12 ">
                Hello
            </div>
        );
    }
}

export default PopupOver;

Answer 1

Bueno, en realidad, React no es adecuado para llamar a los métodos secundarios del padre. Algunos marcos, como Cycle.js , permiten acceder fácilmente a los datos tanto del padre como del hijo y reaccionar a ellos.

Además, hay una buena posibilidad de que realmente no lo necesites. Considere llamarlo a un componente existente, es una solución mucho más independiente. Pero a veces todavía lo necesitas, y luego tienes pocas opciones:

• Pase el método hacia abajo, si es un niño (el más fácil, y es una de las propiedades pasadas)
• añadir biblioteca de eventos; En el ecosistema React, el enfoque de flujo es el más conocido, con la biblioteca Redux . Separa todos los eventos en estados y acciones separados, y los envía desde componentes
• Si necesita usar la función del hijo en un componente padre, puede envolverlo en un tercer componente y clonar el padre con accesorios aumentados.

UPD : si necesita compartir alguna funcionalidad que no involucre ningún estado (como las funciones estáticas en OOP), entonces no es necesario que la contenga dentro de los componentes. Solo declaralo por separado e invoca cuando sea necesario:

let counter = 0;
function handleInstantiate() {
   counter++;
}

constructor(props) {
   super(props);
   handleInstantiate();
}

Answer 2

Puedes hacer algo como esto

import React from ''react'';

class Header extends React.Component {

constructor() {
    super();
}

checkClick(e, notyId) {
    alert(notyId);
}

render() {
    return (
        <PopupOver func ={this.checkClick } />
    )
}
};

class PopupOver extends React.Component {

constructor(props) {
    super(props);
    this.props.func(this, 1234);
}

render() {
    return (
        <div className="displayinline col-md-12 ">
            Hello
        </div>
    );
}
}

export default Header;

Usando estaticos

var MyComponent = React.createClass({
 statics: {
 customMethod: function(foo) {
  return foo === ''bar'';
  }
 },
   render: function() {
 }
});

MyComponent.customMethod(''bar'');  // true