React 暴露组件功能

Question

基于此链接http://reactjs.cn/react/tips/expose-component-functions.html上的示例，我一直在尝试简化代码以更好地理解暴露的方法，所以我得到了以下内容，它不起作用，错误是“Uncaught TypeError: Cannot read property 'animate' of undefined"，我真的不知道原因：

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);

Answer 1

您在第一次渲染中没有对元素的引用，因为它没有安装它。

你可以做这样的事情来让它工作：

var Todos = React.createClass({
    componentDidMount: function() {
        this.refs.hello.animate();
    },
    render: function() {
        return (
                <div>
                    <Todo ref='hello' />
                </div>
        );
    }
});

componentDidMount 在组件已经被渲染（第一次）时被调用。在这里，您将获得对元素的引用

Answer 2

当前接受的答案使用 ref 字符串属性，该属性被认为是遗留的，最终将被弃用。

http://reactjs.cn/react/docs/more-about-refs.html#the-ref-string-attribute

改用 ref 回调属性。

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>
        );
    }
});