如何通过reactjs获得dom的真实高度?(how to get the dom's true height by reactjs?)
有一个reactjs组件,我需要在组件中获得dom的高度。 但我失败了,我不知道哪个是错的。 这是我的代码:
class ImgCropper extends React.Component { constructor(props) { super(props); this.state = { containSize: { width: 0, height: 0 }, }; } componentDidMount() { console.log('=================组件的宽高:', this.image.offsetWidth, this.image.offsetHeight); this.middle.style.width = `${this.contain.offsetWidth}px`; this.middle.style.height = `${this.contain.offsetWidth}px`; // 配置图片的宽高 this.image.style.transform = `translate(0px,${parseInt((this.contain.offsetHeight - this.image.height) / 2, 10)}px)`; } render() { return (<div ref={((div) => { this.contain = div; })} className={styles.container}> <div id="cover-top" ref={(div) => { this.top = div; }} className={styles.coverTop}> <a href=""> <input id="imageFile" name="image" type="file" accept="image/gif, image/jpeg, image/jpeg" />点击上传 </a> <button >选择图片</button> <input id="x" name="x" /> <input id="y" name="y" /> <input id="width" name="width" /> <input id="height" name="height" /> </div> <div id="cover-middle" ref={(div) => { this.middle = div; }} className={styles.coverMiddle} /> <div id="cover-down" ref={(div) => { this.down = div; }} className={styles.coverDown}> <button type="button" >获得裁剪参数</button><span id="params">12121</span> </div> <img id="image" ref={(image) => { this.image = image; }} className={styles.image} draggable="true" src={test} /> </div> ); }控制台日志显示dom的高度始终为0。
There is a reactjs component, i need to get the heigth of a dom in component. But i failed, i don't know which is wrong. This is my code:
class ImgCropper extends React.Component { constructor(props) { super(props); this.state = { containSize: { width: 0, height: 0 }, }; } componentDidMount() { console.log('=================组件的宽高:', this.image.offsetWidth, this.image.offsetHeight); this.middle.style.width = `${this.contain.offsetWidth}px`; this.middle.style.height = `${this.contain.offsetWidth}px`; // 配置图片的宽高 this.image.style.transform = `translate(0px,${parseInt((this.contain.offsetHeight - this.image.height) / 2, 10)}px)`; } render() { return (<div ref={((div) => { this.contain = div; })} className={styles.container}> <div id="cover-top" ref={(div) => { this.top = div; }} className={styles.coverTop}> <a href=""> <input id="imageFile" name="image" type="file" accept="image/gif, image/jpeg, image/jpeg" />点击上传 </a> <button >选择图片</button> <input id="x" name="x" /> <input id="y" name="y" /> <input id="width" name="width" /> <input id="height" name="height" /> </div> <div id="cover-middle" ref={(div) => { this.middle = div; }} className={styles.coverMiddle} /> <div id="cover-down" ref={(div) => { this.down = div; }} className={styles.coverDown}> <button type="button" >获得裁剪参数</button><span id="params">12121</span> </div> <img id="image" ref={(image) => { this.image = image; }} className={styles.image} draggable="true" src={test} /> </div> ); }The console log show the dom's height is 0 always.
最满意答案
你忘了考虑加载图像时间。 在触发componentDidMount时,渲染了React组件,但<img>元素只是从给定的URL开始加载图像。 在这里,您需要使用函数绑定<img> onLoad事件,并检索该函数内的图像大小。
示例代码:
class ImgCropper extends React.Component { constructor(props) { super(props); this.state = { containSize: { width: 0, height: 0 }, }; this.onImageLoad = this.onImageLoad.bind(this); } onImageLoad() { console.log('=================组件的宽高:', this.image.offsetWidth, this.image.offsetHeight); this.middle.style.width = `${this.contain.offsetWidth}px`; this.middle.style.height = `${this.contain.offsetWidth}px`; // 配置图片的宽高 this.image.style.transform = `translate(0px,${parseInt((this.contain.offsetHeight - this.image.height) / 2, 10)}px)`; } render() { return (<div ref={((div) => { this.contain = div; })} className={styles.container}> <div id="cover-top" ref={(div) => { this.top = div; }} className={styles.coverTop}> <a href=""> <input id="imageFile" name="image" type="file" accept="image/gif, image/jpeg, image/jpeg" />点击上传 </a> <button >选择图片</button> <input id="x" name="x" /> <input id="y" name="y" /> <input id="width" name="width" /> <input id="height" name="height" /> </div> <div id="cover-middle" ref={(div) => { this.middle = div; }} className={styles.coverMiddle} /> <div id="cover-down" ref={(div) => { this.down = div; }} className={styles.coverDown}> <button type="button" >获得裁剪参数</button><span id="params">12121</span> </div> <img id="image" ref={(image) => { this.image = image; }} className={styles.image} draggable="true" src={test} onLoad={this.onImageLoad} /> </div> ); } }You forgot to consider loading image time. At the time componentDidMount is triggered, the React component was rendered, but the <img> element just starts loading image from given URL. Here you need to bind onLoad event of <img> with a function, and retrieve image size inside that function.
Sample code:
class ImgCropper extends React.Component { constructor(props) { super(props); this.state = { containSize: { width: 0, height: 0 }, }; this.onImageLoad = this.onImageLoad.bind(this); } onImageLoad() { console.log('=================组件的宽高:', this.image.offsetWidth, this.image.offsetHeight); this.middle.style.width = `${this.contain.offsetWidth}px`; this.middle.style.height = `${this.contain.offsetWidth}px`; // 配置图片的宽高 this.image.style.transform = `translate(0px,${parseInt((this.contain.offsetHeight - this.image.height) / 2, 10)}px)`; } render() { return (<div ref={((div) => { this.contain = div; })} className={styles.container}> <div id="cover-top" ref={(div) => { this.top = div; }} className={styles.coverTop}> <a href=""> <input id="imageFile" name="image" type="file" accept="image/gif, image/jpeg, image/jpeg" />点击上传 </a> <button >选择图片</button> <input id="x" name="x" /> <input id="y" name="y" /> <input id="width" name="width" /> <input id="height" name="height" /> </div> <div id="cover-middle" ref={(div) => { this.middle = div; }} className={styles.coverMiddle} /> <div id="cover-down" ref={(div) => { this.down = div; }} className={styles.coverDown}> <button type="button" >获得裁剪参数</button><span id="params">12121</span> </div> <img id="image" ref={(image) => { this.image = image; }} className={styles.image} draggable="true" src={test} onLoad={this.onImageLoad} /> </div> ); } }
更多推荐
发布评论