まず単純に、react.jsのコードにjquery mobileのコードを書いてみた。
render()メソッドの中に書く。
<body>
<script type="text/jsx">
React.render(
<ul data-role="listview">
<li><a href="acura.html">Acura1</a></li>
<li><a href="audi.html">Audi1</a></li>
<li><a href="bmw.html">BMW1</a></li>
</ul>
);
</script>
</body>
すると何も表示されない。
次に、htmlのbodyタグ直下に書いて見る。
<body>
<div id="content"></div>
<ul data-role="listview">
<li><a href="acura.html">Acura</a></li>
<li><a href="audi.html">Audi</a></li>
<li><a href="bmw.html">BMW</a></li>
</ul>
</div>
<script>省略</script>
</body>
これはきちんと表示される。
react.jsもjquery mobileもタグのattributeを元に、domの操作をしているから、この辺の処理がバッティングしているのかもしれない。
調べてみたところ、jquery mobileが変換するclassを直に指定すれば出来るとの情報がstackoverflowにあった。なるほど。
やってみる。
<body>
<script type="text/jsx">
React.render(
<ul class="ui-listview" data-role="listview" >
<li class="ui-first-child"><a href="acura.html">Acura3</a></li>
<li><a href="audi.html">Audi</a></li>
<li class="ui-last-child"><a href="bmw.html">BMW</a></li>
</ul>
);
</script>
</body>
ブラウザで再度確認する。今度は表示された。しかし、jquery mobileのスタイルではなく、ただのul要素として描画されている。つまり、class以下は無視されたようだ。
試しにstackoverflowで例として出されていたbuttonを表示してみる。
<body>
<script type="text/jsx">
React.render(
<button className="ui-btn"/>
);
</script>
</body>
こちらはきちんとjquery mobile風で表示された。
出来るのと出来ないのがあるようだ。
listviewの場合は、それを含む外のdomもclass指定すれば出来たりするのだろうか。
ただ、いずれにせよいちいちclassを調べなければいけないのはだるすぎる。
あまりこの組み合わせは推奨出来るようなものではなさそうだ。
.PNG)
.PNG)
