2019-02-10に投稿

2/10進捗

概要

  • 試合結果一覧をアコーディオン化
  • 個人タイトルのカード化

試合結果一覧をアコーディオン化

image

シーズンごとにリストアイテム化していた試合日ですが、
今回アコーディオンの中に格納しました。

コンポーネントごとにstateを持ってdisplay:noneを切り替える方法を考えていたのですが、CSSで作るとトランジションが使えて表現が豊かになるのでこちらに変えました。
参考:CSSだけでアコーディオンを作る方法

個人タイトルのカード化

image
昨日の時点でheightが0になってしまってどうしようもなかった問題ですが、
1. BootstrapTableにidを設定する
BootstrapTableにはidというプロパティがないので外側のdivに設定しました。

return (
                <div className='col s12'
                    id={this.props.id}>
                    <BootstrapTable 
                        keyField={this.props.keyField}
                        data={this.props.data}
                        columns={this.props.columns}  />
                </div>
            )

  1. idを元にclientHeightを計算する
    trophyというidを要素につけてclientHeightを計算します。
    22はカードのタイトル分の高さです。
document.getElementById('trophy').clientHeight + 22
  1. stateにセットしてstyleに記述する
this.setState({
   height:document.getElementById('trophy').clientHeight
  })
style={
{ height: this.state.height}}

ckoshien

個人開発5年目。普段はフロントエンドエンジニア。 ReactJS/NextJS/NodeJS/ReactNative/Java

所有者限定モードのためこのボードには投稿できません
コメント