[解決済み] Reactコンポーネントのメソッドを外から呼び出す

質問

React Elementのインスタンスから、Reactコンポーネントが公開するメソッドを呼び出したいのですが、どうすればよいでしょうか。

例えば、この jsfiddle . を呼び出したいのですが alertMessage メソッドから HelloElement を参照します。

追加のラッパーを書くことなく、これを実現する方法はありますか？

編集 (JSFiddleからコピーしたコード)

<div id="container"></div>
<button onclick="onButtonClick()">Click me!</button>

var onButtonClick = function () {

    //call alertMessage method from the reference of a React Element! Something like HelloElement.alertMessage()
    console.log("clicked!");
}

var Hello = React.createClass({displayName: 'Hello',

    alertMessage: function() {
        alert(this.props.name);                             
    },

    render: function() {
        return React.createElement("div", null, "Hello ", this.props.name);
    }
});

var HelloElement = React.createElement(Hello, {name: "World"});

React.render(
    HelloElement,
    document.getElementById('container')
);

どのように解決するのですか？

内部関数にアクセスする方法は2つあります。一つはインスタンスレベル、もう一つは静的レベルです。

インスタンス

からの戻り値で関数を呼び出す必要があります。 React.render . 以下を参照してください。

静的な

を見てみましょう。 ReactJS スタティック . しかし、静的関数はインスタンスレベルのデータにアクセスできないことに注意してください。 this は undefined .

var onButtonClick = function () {
    //call alertMessage method from the reference of a React Element! 
    HelloRendered.alertMessage();
    //call static alertMessage method from the reference of a React Class! 
    Hello.alertMessage();
    console.log("clicked!");
}

var Hello = React.createClass({
    displayName: 'Hello',
    statics: {
        alertMessage: function () {
            alert('static message');
        }
    },
    alertMessage: function () {
        alert(this.props.name);
    },

    render: function () {
        return React.createElement("div", null, "Hello ", this.props.name);
    }
});

var HelloElement = React.createElement(Hello, {
    name: "World"
});

var HelloRendered = React.render(HelloElement, document.getElementById('container'));

次に HelloRendered.alertMessage() .