はじめに

Keystone 4.0 Betaをinstallし、フロント周りをReact+React-Bootstrapに置き換えてみた[2]の続きです。

今回は前回省いたの略した部分を実際にComponentに書き換えた際のトラブルシューティングになります。

ただし、自分が初学者であるため躓いたことばかりで、初歩的な内容が中心となります。
React、React-Bootstrapに詳しい方には既知のことがほとんどかと思いますので予めご了承ください。

環境・前提

前回と変更点がないので省きます。

[1]jadeからreactに変数を渡せない！

jadeから外部ファイルとして読み込まれているので変数を渡す方法で悩みました。
あれこれ試行錯誤したのですが以下のようにしました。

index.jade

if user && user.canAccessKeystone
    script().
        var userCanAccessKeystone = true;
else
    script().
        var userCanAccessKeystone = false;

script(src='/js/index.js')

ちょっと書き方が愚直ですが。。。
jadeでjavascriptのコードを書く形で変数を渡す必要があるので、index.jsを読み込む前の部分で変数宣言のコードを書いています。

もちろん、htmlに出力されるので、見られては困るような情報まで丸ごと書き出さないように注意しないといけませんね。サニタイズもそうですが。

オブジェクトをなんでも渡すのでなく、内容を精査して最低限必要なもののみにしておきたいですね。

ここらへんはサーバーもクライアントも両方JavaScriptなのでごっちゃになって混乱しがちですが。

[2]if文の書き方

この記法も違和感ありますが。
先に変数で分岐内のタグを格納しておく方法も考えたのですが、とりあえず今回はこれで済ませてしまいました。というか、そもそもComponentを作って切り出すべきですね。

index.js

{(() => {
    if(userCanAccessKeystone){
        return <Button href='/keystone' bsStyle='primary' bsSize='large'>Open the Admin UI</Button>
    } else {
        return <div><p>
            We have created a default Admin user for you with the email <strong>user@keystonejs.com</strong> and the password <strong>admin</strong>.</p>
            <p>
            <Button href='/keystone/signin' bsStyle='primary' bsSize='large' style={{"marginRight": "10px"}}>Sign in</Button>
            to use the Admin UI.
            </p></div>;
    }
})()}

[3]インラインCSSの書き方

style='margin-right:10px;'と書いてエラー。
style={margin-right:10px}もダメ。
style={{margin-right:10px}}もダメ。
style={{"margin-right":"10px"}}もダメ。
style={{"marginRight": "10px"}}でやっとOK

そもそもインラインCSSなど書くべきではないのですが。。。
できるだけそのまま移植してみるという趣旨なので。

ちなみに既存のComponentにもそのまま使えるのですね。

<Button href='/keystone/signin' bsStyle='primary' bsSize='large' style={{"marginRight": "10px"}}>Sign in</Button>

[4]containerのコンポーネント化

知っている人からすれば笑ってしまうような所で嵌ったのですが
<div class="container">をドキュメント内で"container"で検索したところ見つからず悩みました。これは <Grid>でした。

[5]jQuery依存の既存コード

ログイン中は管理画面関連の処理が走るのですが、これがjQuery依存しているため下記のエラーがでました。

React-Bootstrap is a complete re-implementation of the Bootstrap components using React. It has no dependency on either bootstrap.js or jQuery. If you have React setup and React-Bootstrap installed you have everything you need.

これはdefault.jade内でjQueryを部分的に読み込ませるようにしました。

default.jade

if user && user.canAccessKeystone
  script(src='/js/jquery/jquery-1.11.3.min.js')  //追加
  script(src='/keystone/js/content/editor.js')

はじめはjQueryの機能がReact-Bootstrapに同梱されていて、react化したindex.jsの後にeditor.jsを読み込ませるように並び替えれば良いかと考えたのですが、どうも違うみたいです。
（実は同梱されていて、呼び出し方があるなど、認識が違っていたらご指摘ください）

公式のドキュメント Getting Stargedを読むと

React-Bootstrap is a complete re-implementation of the Bootstrap components using React. It has no dependency on either bootstrap.js or jQuery. If you have React setup and React-Bootstrap installed you have everything you need.

とあるので内部で読み込んでいるのではなく、bootstrapで利用するjQueryの機能は独自に実装しているということなんでしょうかね。ソースコード見ても、package.json見てもそれらしきものはないので。

最後に

前回の課題で解決してない部分もありますが、読んで見るだけでわかった気になったような部分で結構嵌り、実際に手を動かしてみるものだなと思いました。

後作業していて感じたのですが、そもそもjadeいらない気がしてきましたね。。。これは作業しながら後日考えてみようと思います。