从外部调用React组件方法

Z时代
2024-01-10
分类：问答

我想从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')
);

回答：

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

回答：

您需要在从返回时调用函数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'));