Mithril.js 親コンポーネント内から子コンポーネントを操作する - React ref 相当

親コンポーネント内から子コンポーネントの変数やDOMを操作する場合、悩ましい問題が有ります。
それはコンポーネントの view() メソッド内では、まだコンポーネントなので実態が有りません。DOMも生成されていません。
言い換えれば、まだクラスでありインスタンスではないので、さてどうやってアクセスしようかと悩むのです。

この問題を解決するため React では ref 属性が用意されています。

では Mithrilではどうするか? ということですが、案外シンプルな方法で解決できます。

方法1 - oncreate() で DOMが作成された時点で vnode の参照を取得

oncreate={ (vnode)=>{ this.ref = vnode; } } で取得する方法

class SubComponent{

	public SubValue = "hello world.";

	public  view(){
		return ".......";
	}
}

class MainComponent{

	public ref;		// SubComponent の vnode が入ります。

	public alertSubValue(){
		alert( this.ref.state.SubValue );
	}

	view(){
		return (
			<div>
				<SubComponent oncreate={ (vnode)=>{ this.ref = vnode; } } />		// !!!
				<button onclick={ ()=>{ this.alertSubValue() } } >show SubValue</button>
			</div>
		);

	}

}

方法2

この方法では ref の値が取れるタイミングは、DOMは作成された oncreate() の時点ではなく oninit() のタイミングに相当します。

{ this.ref = <SubComponent /> } で取得する方法

class SubComponent{

	public SubValue = "hello world.";

	public  view(){
		return ".......";
	}
}

class MainComponent{

	public ref;		// SubComponent の vnode が入ります。

	public alertSubValue(){
		alert( this.ref.state.SubValue );
	}

	view(){
		return (
			<div>
				{ this.ref = <SubComponent /> }		// !!!
				<button onclick={ ()=>{ this.alertSubValue() } } >show SubValue</button>
			</div>
		);
	}

}

{ this.ref = <SubComponent /> } という書き方が好みは出てくるのですが、 <SubComponent /> の内容を this.ref へ代入しつつ、view() での描画にも使われますので一石二鳥です。