reactjs - 从外部调用 React 组件方法

Question

我想从 React 元素的实例调用 React 组件公开的方法。

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

有没有一种方法可以实现这一点而无需编写额外的包装器？

编辑(从 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

你可以这样做

import React from 'react';

class Header extends React.Component{

    constructor(){
        super();
        window.helloComponent = this;
    }

    alertMessage(){
       console.log("Called from outside");
    }

    render(){

      return (
      <AppBar style={{background:'#000'}}>
        Hello
      </AppBar>
      )
    }
}

export default Header;

现在，您可以从该组件的外部进行如下调用

window.helloComponent.alertMessage();