¿Cómo acceder a los métodos de los componentes desde “afuera” en ReactJS?
¿Por qué no puedo acceder a los métodos de los componentes desde “afuera” en ReactJS? ¿Por qué no es posible y hay alguna forma de solucionarlo?
Considere el código:
var Parent = React.createClass({
render: function() {
var child = <Child />;
return (
<div>
{child.someMethod()} // expect "bar", got a "not a function" error.
</div>
);
}
});
var Child = React.createClass({
render: function() {
return (
<div>
foo
</div>
);
},
someMethod: function() {
return 'bar';
}
});
React.renderComponent(<Parent />, document.body);
React proporciona una interfaz para lo que intentas hacer a través del refatributo . Asigne un componente a refy su currentatributo será su componente personalizado:
class Parent extends React.Class {
constructor(props) {
this._child = React.createRef();
}
componentDidMount() {
console.log(this._child.current.someMethod()); // Prints 'bar'
}
render() {
return (
<div>
<Child ref={this._child} />
</div>
);
}
}
Nota : esto solo funcionará si el componente secundario se declara como una clase, según la documentación que se encuentra aquí: https://facebook.github.io/react/docs/refs-and-the-dom.html#adding-a- ref-a-un-componente-de-clase
Actualización 2019-04-01: ejemplo modificado para usar una clase y createRefsegún los últimos documentos de React.
Actualización 19 de septiembre de 2016: se modificó el ejemplo para usar la devolución de llamada de referencia según las instrucciones de los documentos refdel atributo String .
Si desea llamar funciones en componentes desde fuera de React, puede llamarlas según el valor de retorno de renderComponent:
var Child = React.createClass({…});
var myChild = React.renderComponent(Child);
myChild.someMethod();
La única forma de controlar una instancia de React Component fuera de React es almacenando el valor de retorno de React.renderComponent. Fuente .
