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