[解決済み】ReactJSで「外」からコンポーネントメソッドにアクセスする方法は？

質問

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

解決方法は？

Reactは、あなたが行おうとしていることのためのインターフェイスを ref 属性 . コンポーネントに 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-ref-to-a-class-component

2019-04-01にアップデートしました。 クラスを使用するように例を変更し createRef 最新のReactドキュメントに準拠。

2016-09-19に更新しました。 の指導により、refコールバックを使用するように例を変更しました。 その ref 文字列属性 のドキュメントを参照してください。