如何通过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>
);
}
}
更多推荐
发布评论