componentDidMount() { var pElement = document.getElementById( "toph" ) ; var clientHeight = pElement.clientHeight ; console.log(clientHeight); }
普通にid="toph"の高さを取得したいのですが、
実寸と取得できる数値が違います。。
実寸は100px程度なのですが、
300ぐらいの値が帰ってきます。
何か対応方法はありますでしょうか?
推測ですが、cssが当たる前の要素が縦に並んだ上体の時の
高さを引っ張ってきてるようなきがしています・・
追記
やりたいことはtophの高さを取得してウィンドウ高さからマイナスします。
残ったエリア内をoverflow scrollでスクロールエリアにしたく、
ブラウザの高さが変更されても再計算して常に画面に吸着した状態にすることが目的です。
追記2
refsを使ったやり方に変えてみましたが帰ってくる数字はまだ変わりませんでした。念のため記します。
componentDidMount() { var test = this.refs.toph; console.log(test.clientHeight); } render() { return ( <section> <div ref="toph">a<br />b</div> <Contents /> </section> ); }
tophの部分はわかりやすいように省略しました。
実寸は42pxなのですが、帰ってくる数字は48です。。。
ここに要素が入れば入るほどその数字の乖離がはげしくなっていきます・・・
追記3
clicks() { var test = this.refs.toph; console.log(test.clientHeight); } render() { return ( <section> <div ref="toph" onClick={this.clicks}>a<br />b</div> <Contents /> </section> ); }
このようにクリックしてから高さを取得したらちゃんとした値が取得できました。
これを読み込んだ段階で取得できると良いのですが・・・
追記4
componentDidMount() { var test = this.refs.toph; setTimeout(function() { console.log(test.clientHeight); this.setState({hheight: test.clientHeight}) },0) }
setTimeout0秒で入れてみるとconsole.logの部分は正しい値が表示されました!
ただ、this.setStateの部分がUncaught TypeError: this.setState is not a functionというエラーになってしまいました・・・
追記5
constructor(props) { super(props); this.state = { topPartsHeight: null }; } componentDidMount() { process.nextTick(() => { const elem = this.topParts; this.setState({ topPartsHeight: elem.clientHeight }) }) } render() { return ( <div ref={(div) => {this.topParts = div }} style={{height:this.state.topPartsHeight}}>
上記で実現したいことができました!みなさんありがとうございました。
回答2件
あなたの回答
tips
プレビュー