Quiero obtener la referencia del componente infantil. La relación anidada entre los componentes se muestra a continuación:
<Demo1 /> ---> <Demo2 /> ---> <Demo3 />¿Cómo obtener la referencia de Demo3 en Demo1?
Puedes pasar la ref dentro de los props :
// -- sub-sub component var SubSub = React.createClass({ render: function() { return <div><sub ref={ this.props.subSubRef }>Sub-sub component</sub></div>; } }); // -- sub component var Sub = React.createClass({ render: function() { return <div><em>Sub component</em><SubSub subSubRef={ this.props.subRef } /></div>; } }); // -- root component var Main = React.createClass({ render: function() { // -- get the ref from the child const refCallback = function( domRef ){ this._subSubDomRef = domRef; }.bind( this ); // -- example: accessing the dom element in some way const handleClick = function(){ if( this._subSubDomRef ){ this._subSubDomRef.innerHTML = this._subSubDomRef.innerHTML + '.'; } }.bind( this ); // -- return <div> <strong onClick={ handleClick }>Main component</strong> <Sub subRef={ refCallback } /> </div>; } }); (Tenga en cuenta que podría tener conflictos en el caso de que alguna biblioteca que esté usando use el mismo nombre de apoyo que usted. Esa es una de las razones por las que se recomienda forwardRef )
La documentación oficial de React menciona referencias de reenvío antes de la disponibilidad de forwardRef en exposing-dom-refs-to-parent-components y recomienda el ejemplo en dom_ref_forwarding_alternatives_before_16.3.md .
Desafortunadamente, este ejemplo usa createRef , que tampoco está disponible antes de v16.3. Debe seguir los comentarios allí y adaptar el ejemplo en consecuencia.
La documentación de React para v0.14 se puede encontrar en web.archive.org .
forwardRef y createRef se introdujeron en la versión 16.3.0 (29 de marzo de 2018):