从外部调用 React 组件方法 [英] Call a React component method from outside

问题描述

我想从 React Element 的实例调用一个由 React 组件公开的方法.

I want to call a method exposed by a React component from the instance of a React Element.

例如，在这个 jsfiddle 中.我想从 HelloElement 引用中调用 alertMessage 方法.

For example, in this jsfiddle. I want to call the alertMessage method from the HelloElement reference.

有没有一种无需编写额外包装器就可以实现这一目标的方法?

Is there a way to achieve this without having to write additional wrappers?

编辑(从 JSFiddle 复制代码)

Edit (copied code from 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')
);

推荐答案

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

There are two ways to access an inner function. One, instance-level, like you want, another, static level.

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

You need to call the function on the return from React.render. See below.

看看 ReactJS 静态.但是请注意，静态函数无法访问实例级数据，因此 this 将是 undefined.

Take a look at ReactJS Statics. Note, however, that a static function cannot access instance-level data, so this would be 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().

这篇关于从外部调用 React 组件方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！