最近看完react在写一个DEMO，实现一个双栏瀑布流视图，我的思路是，每次加载完一个item后，获取左边栏的高度与另一栏的高度进行比较，然后决定下个item添加到左边栏还是右边栏。然而现在在父组件中，我无法正确获取到两栏height，我要想能够获取组件样式该如何去做？

import React,{Component,Fragment} from 'react';
import ReactDOM from 'react-dom';
import CommunityItem from './components/CommunityItem'
import {CommunityCortainer,
        CommunityLeftWrap,
        CommunityRightWrap} from './style';
import { connect } from 'react-redux';
import { actionCreators } from './store';



class Community extends Component{
    constructor(props){
        super(props);
    }
    
    render(){
        return(
            <Fragment>    
                <CommunityCortainer>
                    <CommunityLeftWrap ref={(wrap)=>{this.leftWrap = wrap}}> 
                        {   
                            this.props.communityListData.map((item)=>{
                                return <CommunityItem key={item.id} data={item}/>
                            })
                        }
                    </CommunityLeftWrap>
                    <CommunityRightWrap ref={(wrap)=>{this.rightWrap = wrap}}>
                        {   
                            this.props.communityListData.map((item)=>{
                                return <CommunityItem key={item.id} data={item}/>
                            })
                        }
                    </CommunityRightWrap>
                </CommunityCortainer>
            </Fragment> 
        )
    }

    // 组件挂载完毕时
	componentDidMount() {
        this.props.changeCommunityData();
        console.log(this.leftWrap.clientHeight);
        console.log(this.rightWrap.clientHeight);
	}
}
// 从reduce获取数据到this.props中
const mapState = (state) => ({
    communityListData: state.getIn(['community', 'communityList'])
})

// 修改reduce中的数据
const mapDispatch = (dispatch) => ({

	// 改变communityList
	changeCommunityData() {
		dispatch(actionCreators.getCommunityList());
	}
});

export  default connect(mapState, mapDispatch)(Community);

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import {CommunityItemWrap,
        CommunityItemImg,
        CommunityItemTitle,
        CommunityItemNameWrapper,
        CommunityItemIcon,
        CommunityItemName} from './../style';

class CommunityItem extends Component{
    constructor(props){
        super(props);
    }
    
    render(){
        let data = this.props.data;
        return(
            <CommunityItemWrap ref={(item)=>{this.item = item}}>
                <CommunityItemImg src={data.img}></CommunityItemImg>
                <CommunityItemNameWrapper>
                    <CommunityItemIcon src={data.icon}></CommunityItemIcon>
                    <CommunityItemName>{data.username}</CommunityItemName>
                </CommunityItemNameWrapper>
                <CommunityItemTitle>{data.title}</CommunityItemTitle>
            </CommunityItemWrap>
        )
    }

    componentDidMount(){
        let itemNode = ReactDOM.findDOMNode(this.item);
        console.log(itemNode.offsetHeight);
    }
}

export default CommunityItem;

输出结果如图：

我的item没有设置具体高度，只设置了max-height，本意是根据图片大小，自行决定item高度，width固定，不知道输出结果是否与此有关。
item样式如下：

export const CommunityItemWrap = styled.div`
    width:4.4rem
    max-height:5.733rem;
    margin:0.347rem auto 0 auto;
    background-color: yellow;
	box-shadow: 0 0 0.4rem 0 rgba(0, 0, 0, 0.14);
    border-radius: 0.134rem;
    overflow:hidden;
    position:relative;
`;  

使用ref获取的是否是虚拟DOM，使用findDOMNOde获取是否是真实DOM？我又该如何获取组件的CSS样式？