備忘録:React.Componentの派生クラスで定義したメソッドを使う場合はReactDOM.renderの戻り値のインスタンスを使う
やりたかったこと
タイトルの通り。React.Componentの派生クラスで定義したstate操作用のメソッドを当初React.createElementの戻り値をインスタンスとして使用しようとしていたができなかった。
ReactDOM.renderの戻り値はできそう。
貴重な平日の1時間を返して(フロント界隈だと割と常識なのかな……)
コード
クラス定義
class Hoge extends React.Component { constructor(props) { super(props); // 省略 } foo(e) { // このメソッドを後で呼びたい } render() { // 省略 } }
いい例
/* DOM生成 */ let instance = ReactDOM.render(React.createElement(Hoge, domElem)); /* メソッド呼び出し */ instance.foo(e);
だめな例
/* DOM生成 */ let instance = React.createElement(Hoge, domElem); /* メソッド呼び出し */ instance.foo(e); /* render */ ReactDOM.render(instance);