React 暴露组件函数

IT技术 javascript reactjs
2021-05-22 05:46:15

基于此链接http://reactjs.cn/react/tips/expose-component-functions.html上的示例,我一直在尝试简化代码以更好地理解公开的方法,所以我得到了以下内容,它没有t 工作,错误是“未捕获的类型错误:无法读取未定义的属性 'animate'”,我真的不知道原因:

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);
2个回答

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

你可以做这样的事情来使它工作:

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

componentDidMount当组件已经渲染(第一次)时调用。在这里您将获得对元素的引用

当前接受的答案使用 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>
        );
    }
});