如何获取组件CSS样式

Question

最近看完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样式？

Answer 1

Dell 2020-09-01 23:54:20

使用ref获取的不是虚拟dom，是组件的引用。findDomNode 是真实dom，组件样式你用style-component 很难直接拿到

• 提问者 见信 #1

  可是，按老师你讲的项目，基本上所有的组件都用了style-component，那么拿组件样式这个问题是必须得解决的，因为如果我需要做一些滚动加载之类的东西的话，拿样式是必须得，这种我该怎么去拿

• Dell 回复 提问者 见信 #2

  这个时候，你可以向样式组件传参数，根据参数，控制逻辑。懂我意思？

• 提问者 见信 回复 Dell #3

  不太懂。如果是点击，我可以在redux里设定一个loading来控制，这种我倒是理解，antd里的按钮就是这种原理。但是如果是滑块，滑到一定程度这种，我不是得时时获取最后一个元素距离顶部距离来判断是否加载接下来的数据吗？

点开查看后面6条评论