シーズンごとにリストアイテム化していた試合日ですが、
今回アコーディオンの中に格納しました。
コンポーネントごとにstateを持ってdisplay:noneを切り替える方法を考えていたのですが、CSSで作るとトランジションが使えて表現が豊かになるのでこちらに変えました。
参考:CSSだけでアコーディオンを作る方法
昨日の時点で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>
)
document.getElementById('trophy').clientHeight + 22
this.setState({
height:document.getElementById('trophy').clientHeight
})
style={
{ height: this.state.height}}