☰

Reactコンポーネントメソッドを外部から呼び出す 質問する

tag-icon • tag-icon reactjs
Reactコンポーネントメソッドを外部から呼び出す 質問する

React Element のインスタンスから React コンポーネントによって公開されたメソッドを呼び出したいです。

例えば、このjsfiddlealertMessage参照からメソッドを呼び出したいです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')
);

ベストアンサー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();

おすすめ記事