ちょっと前にReactの勉強でこういう感じのコンポーネントをつくってみました。
Reactはコンポーネントベースで開発していきます。Ligtning Componentもコンポーネントベースで開発していきます。...ということでLightning Componentバージョンも試してみました。
以下のコンポーネントで構成されています。
- CounterBox : CounterItemをまとめたもの
- CounterItem : CounterItemValueとCounterItemMenuをまとめたもの
- CounterItemValue : 値の表示
- CounterItemMenu : Up / Downの処理を実行
Lightning Componentの開発でコンポーネント同士の連携をする場合はLightning Eventをつかって対応する必要がありますが、今回のように親子でつながっているようなときは、aura:attributeのtype="Aura.Action"のcontroller.jsの処理を渡すことで連携できます。
受け取り側 (CounterItemMenuコンポーネント)
<aura:attribute name="countup" type="Aura.Action" /> <aura:attribute name="countdown" type="Aura.Action" />
値渡し側 (CounterItemコンポーネント)
<c:CounterItemMenu countup="{!c.countup}" countdown="{!c.countdown}" />
これで、CounterItemMenuコンポーネントから、親のCounterItemコンポーネントの処理を呼び出して、結果をCounterItemValueコンポーネントに反映させることができます。
サンプルコードです。
