情况：我想获取元素的尺寸和位置
Context:我正在制作一款纸牌游戏。卡片可以放置在板上。我需要能够检查他们的目的地是否在板上。然后我将存储它们相对于板的尺寸和位置的位置。这将有助于在可能使用不同屏幕尺寸的一群不同客户之间重现该板。
目前的造型：
板的尺寸宽度和高度定义为：
width: 100%;
flex-grow:1;
它的容器具有以下属性：
display: flex;
flex-direction: column;
董事会形象 https://i.stack.imgur.com/BvaBK.png
您应该注意，实际尺寸是[942.922x874]。我找不到位置信息，我假设是因为默认 div 位置：静态而不是位置：绝对。
我的尝试：
let board = document.getElementById("gameboard");
if (board) {
console.log("style.height", board.style.height);
console.log("style.width", board.style.width);
console.log("offsetHeight", board.offsetHeight);
console.log("offsetWidth", board.offsetWidth);
console.log("getBoundingClientRect" , board.getBoundingClientRect());
}
我的尝试的输出 https://i.stack.imgur.com/cKeUr.png
请注意，输出尺寸与我的实际尺寸不同。
[1137, 920] 而不是 [942.922x874]。 [1137, 920]实际上是整个身体的尺寸。而且，无论我做什么来获得位置，它总是给我[0,0]。
EDIT-1
我们得出的结论是，这可能是一个时间问题。我需要确保检索尺寸和位置的代码在元素渲染后运行。因为我正在使用反应，所以我发现了这个线程，ReactJS - 获取元素的高度 https://stackoverflow.com/questions/35153599/reactjs-get-height-of-an-element。这基本上是说我需要挂钩 React 的组件生命周期方法 componentDidMount() ，该方法在渲染完成后立即运行。您可以在下面看到我的实现。然而，即使使用此实现，我似乎仍然获得主体容器的尺寸而不是我正在访问的元素。
import React, {PureComponent, PropTypes} from 'react';
// import Card from '../../Components/Card/index.js';
// import Collection from '../../Components/Collection/index.js';
import {List} from 'immutable';
import Indicator from '../../Components/Indicator/index.js';
import Counter from '../../Components/Counter/index.js';
import {connect} from 'react-redux';
import * as actionCreators from './../../action_creators.js';
import './styles.scss';
export default class Game extends PureComponent {
componentDidMount() {
let board = document.getElementById("gameboard");
console.log("getBoundingClientRect" , board.getBoundingClientRect());
}
render() {
let playersById = this.props.playersById;
let collections = this.props.collections;
let counters = this.props.counters;
let indic_list = [];
let coll_list = [];
//Indicators
playersById.forEach(function(value, key, map){
indic_list.push(<p className="section-name">{playersById.get(key).get('name')+"'s Indicators"}</p>)
playersById.get(key).get('indicators').forEach(function(value, key2, map){
indic_list.push(<Indicator playerId={key} action={this.props.modIndicator} label={key2}>{value}</Indicator>)
}, this);
},this);
//Collections
collections.forEach(function(value, key, map) {
coll_list.push(<span>{key}: {collections.get(key).get("content").size}</span>);
collections.get(key).get("control").forEach(function(value, key, map){
coll_list.push(<span>Control: {value}</span>);
});
});
return (
<div className="frame">
<div className="left-col">
{indic_list}
</div>
<div className="center-col">
<span className="collections">
{coll_list}
</span>
<div id="gameboard"></div>
</div>
<div className="right-col">
<div className="counters">
{counters.map(function(type){
return <Counter label={type}>????</Counter>
})}
</div>
</div>
</div>
)
}
}
Game.PropTypes = {
playersById: PropTypes.object.isRequired,
collections: PropTypes.object.isRequired,
counters: PropTypes.object.isRequired,
modIndicator: PropTypes.func.isRequired
}
function mapStateToProps(state) {
return {
playersById: state.get('playersById') || new List(),
collections: state.get('collections') || new List(),
counters: state.get('counters') || new List()
};
}
export const GameContainer = connect(mapStateToProps, actionCreators)(Game);
编辑2解决方案我的问题的解决方案来自这个线程。获取React中组件的高度 https://stackoverflow.com/questions/35915257/get-the-height-of-a-component-in-react
以下是我的代码中的实现。
import React, {PureComponent, PropTypes} from 'react';
// import Card from '../../Components/Card/index.js';
// import Collection from '../../Components/Collection/index.js';
import {List} from 'immutable';
import Indicator from '../../Components/Indicator/index.js';
import Counter from '../../Components/Counter/index.js';
import {connect} from 'react-redux';
import * as actionCreators from './../../action_creators.js';
import './styles.scss';
export default class Game extends PureComponent {
render() {
let playersById = this.props.playersById;
let collections = this.props.collections;
let counters = this.props.counters;
let indic_list = [];
let coll_list = [];
//Indicators
playersById.forEach(function(value, key, map){
indic_list.push(<p className="section-name">{playersById.get(key).get('name')+"'s Indicators"}</p>)
playersById.get(key).get('indicators').forEach(function(value, key2, map){
indic_list.push(<Indicator playerId={key} action={this.props.modIndicator} label={key2}>{value}</Indicator>)
}, this);
},this);
//Collections
collections.forEach(function(value, key, map) {
coll_list.push(<span>{key}: {collections.get(key).get("content").size}</span>);
collections.get(key).get("control").forEach(function(value, key, map){
coll_list.push(<span>Control: {value}</span>);
});
});
return (
<div className="frame">
<div className="left-col">
{indic_list}
</div>
<div className="center-col">
<span className="collections">
{coll_list}
</span>
<div id="gameboard" ref={(node) => this.calcHeight(node)}></div>
</div>
<div className="right-col">
<div className="counters">
{counters.map(function(type){
return <Counter label={type}>????</Counter>
})}
</div>
</div>
</div>
)
}
calcHeight(node){
if (node) {
console.log("calcHeight", node.getBoundingClientRect());
}
}
}
Game.PropTypes = {
playersById: PropTypes.object.isRequired,
collections: PropTypes.object.isRequired,
counters: PropTypes.object.isRequired,
modIndicator: PropTypes.func.isRequired
}
function mapStateToProps(state) {
return {
playersById: state.get('playersById') || new List(),
collections: state.get('collections') || new List(),
counters: state.get('counters') || new List()
};
}
export const GameContainer = connect(mapStateToProps, actionCreators)(Game);
