从外部调用React组件方法

Question

我想从React元素的实例中调用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')
);

Answer 1

有两种访问内部函数的方法。一个实例级别，如您所愿，另一个静态级别。

实例

您需要在从返回时调用函数React.render。见下文。

静态的

看一下ReactJS Statics。但是请注意，静态函数不能访问实例级数据，因此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()。