《Riot.js》this.optsとは？初心者がわかりやすく解説

Riot.jsのopts
1. マウント時に渡せるデータ
2. カスタムコンポーネントからも渡せる
propsの使い方
エンジニアにおすすめのアイテム
1. 目の保温マッサージ
2. 座椅子をゲーミングチェア風に

Riot.jsのopts

業務でRiot.jsを使う機会がありました。公式サイトを以下に添付します。

Riot.js — Simple and elegant component-based UI library

Riot.js lets you build user interfaces with custom tags using simple and enjoyable syntax.

コードを読んでいる最中、this.optsという構文？プロパティが良く出てきて、何が格納されているのか良くわからなかったので調べてみることにしました。

マウント時に渡せるデータ

親コンポーネント、ルートコンポーネントからコンポーネントをマウントする時に、コンポーネントに対して渡すことができるデータのことです。以下のようにhogeコンポーネントに対してtitleというメンバーを渡した場合

riot.mount('hoge', {title: 'this.optsについて'})

1	riot.mount('hoge', {title: 'this.optsについて'})

hogeコンポーネントでは

console.log(this.opts.title) // this.optsについて

1	console.log(this.opts.title) // this.optsについて

と参照することが可能です。

カスタムコンポーネントからも渡せる

Riot.jsではapp.tagのファイルにカスタムコンポーネントとrouteを使ってpathを定義すると思いますが、この場面でもカスタムコンポーネントのattributeを使ってデータを渡すことができます。

<hoge title="this.optsについて">

1	<hoge title="this.optsについて">

先程と同様にhogeコンポーネントで

console.log(this.opts.title) // this.optsについて

1	console.log(this.opts.title) // this.optsについて

titleを参照することが可能です。

propsの使い方

公式サイトを読むと、マウント時の第2引数の名前はpropsと書かれていました。

riot.mount(selector: string, props?: object, componentName?: string): [RiotComponent]

1	riot.mount(selector: string, props?: object, componentName?: string): [RiotComponent]

このpropsの説明として以下の文章が書かれていました。

props optional object is passed for the component to consume. This can be anything, ranging from a simple object to a full application API. Or it can be a Flux- store. Really depends on how you want to structure your client-side applications. Also note that attributes you set on your tags will take precedence over ones specified with same names via props argument.

引用：「Core API」