Según el ejemplo en este enlace http://reactjs.cn/react/tips/expose-component-functions.html , he estado tratando de simplificar el código para comprender mejor los métodos expuestos, así que obtuve lo siguiente, que no t funciona, el error es "Error de tipo no detectado: no se puede leer la propiedad 'animada' de indefinido" y realmente no sé el motivo:
var Todo = React.createClass({ render: function() { return <div></div>; }, //this component will be accessed by the parent through the `ref` attribute animate: function() { console.log('Pretend is animating'); } }); var Todos = React.createClass({ render: function() { return ( <div> <Todo ref='hello' /> {this.refs.hello.animate()} </div> ); } }); ReactDOM.render(<Todos />, app);no tiene la referencia al elemento en el primer render porque no está montado.
puedes hacer algo como esto para que funcione:
var Todos = React.createClass({ componentDidMount: function() { this.refs.hello.animate(); }, render: function() { return ( <div> <Todo ref='hello' /> </div> ); } }); se llama a componentDidMount cuando el componente ya se ha renderizado (por primera vez). aquí tendrás la referencia al elemento
La respuesta actualmente aceptada usa el atributo de cadena de referencia que se considera heredado y eventualmente quedará obsoleto.
http://reactjs.cn/react/docs/more-about-refs.html#the-ref-string-attribute
Utilice el atributo de devolución de llamada ref en su lugar.
http://reactjs.cn/react/docs/more-about-refs.html#the-ref-callback-attribute
var Todos = React.createClass({ render: function() { return ( <div> <Todo ref= {function(n) {n.animate();}} /> </div> ); } });