浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【javascript】document.getElementByIdを応用してdivの中にネストされたコンポーネントを入れる

 

デバイス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は、テキスト入力の際のキーボードが出現する時に

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

このやり方にいきつくまでかなり苦労しました。

  • この記事いいね! (0)