【javascript・react】renderされたdivを別の空っぽのdivの中に入れ込む方法

※reactを扱った記事です！

実機の動作確認中iphone・androidでそれぞれコンポーネント

が異なった動作をしたときは、何かしらの分岐で処理を分けなければ

いけません。

もし、コンポーネントにcssであらかじめ設定していた場合は、

分岐後また一からdocument.getElementByIdしたり

getsetattributeで一つ一つプロパティを入れこむ作業が待っており、

非っっ常にめんどくさい目に逢います。

ですが、同じコンポーネントでよければ三行くらいで

コンポーネントの入れ替えをすることができます。

idが指定されていた場合に限りますが、document.getElementByIdを

使って丸ごとdivの中に入れ込む方法です。

javascript側はこんな感じ。なんかフィッシャーイェーツ

シャッフルと似てます。一行目は、何も入っていないdiv。

二行目は、入れ替えたいdiv（コンポーネント）。三行目で

空divに追加。

※は必ずcomponentDidmount内に書きましょう。

const div = document.getElementById("depand");
var currentDiv = document.getElementById("topic");
div.appendChild(currentDiv);

こちらはJSX側。

<div id="depand"></div>
<div style={style.block}>この上に入れ込む</div>

<div style={style.topicArea} id="topic">
<TextField
hintText="ここに入力"
style={style.topicText}
id="text"
maxLength="100" />

<FlatButton
label="メッセージを送る"
backgroundColor="#000"
style={style.topicBtn}
labelStyle={style.BtnLabel}
disabled={false}
onTouchTap={this.topicAdd} />
</div>

divのidとdivで囲んであるコンポーネントがあれば、範囲全てを

style.blockの上に持ってくることができます。

iosは、テキスト入力の際のキーボードが出現する時に

下部に固定してあるコンポーネントを飲み込んでしまうので

このやり方にいきつくまで大分苦しみました。

これ、react側じゃなくてiosの手違いなんじゃないかな？