如何从ReactJS的“外部”访问组件方法？

Question

为什么我不能从ReactJS的“外部”访问组件方法？为什么不可能，有什么办法解决呢？

考虑一下代码：

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

Answer 1

React通过refattribute提供了一个您要尝试执行的操作的接口。给组件分配一个ref，其current属性将是您的自定义组件：

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

注意
：仅根据下面的文档，如果子组件被声明为类，则此方法才有效：https :
//facebook.github.io/react/docs/refs-and-the-dom.html#adding-a-
引用到类组件

更新2019-04-01： 更改了示例以使用类和createRef每个最新的React文档。

2016年9月19日更新： 更改了示例，以
根据refString属性文档中的指南使用引用回调。