this.refs[`tag${ind}`]&&this.refs[`tag${ind}`].clientHeight

react

//强制刷新为了获取dom的高度

this.forceUpdate();

<div className={classnames("bottom grade", { auto: tableData[i][val.enName+'hide']&&tableData[i][val.enName+'hide'] == 2 })}>
            {
              (val.enName != 'resources' ?
                (<div ref={`tag${ind}`} className="tag-bottom block">
                  {
                    data[val.enName+'TagList']&&data[val.enName+'TagList'].length > 0 ? (data[val.enName+'TagList'].map((v, i) => {
                      console.log(val.enName, data[val.enName+'TagList'], 'why');
                      return (
                        <Tooltip key={i}  placement="top" title={v}>
                        <Tag className={classnames("key-tag")}
                          key={i} color="#EDF3FC">
                          <div className="over-name">{v || '--'}</div>
                        </Tag>
                        </Tooltip>
                      )
                    })
                    )
                      : null}
                </div>) :
                <div className="reason">原因：{data.reason}</div>)

            }
          </div>
          {console.log(this.refs[`tag${ind}`]&&this.refs[`tag${ind}`].clientHeight,'whyclinent')}
          {
            this.refs[`tag${ind}`]&&this.refs[`tag${ind}`].clientHeight>32?
            <span>
              <span style={{position: 'relative',top: '-10px'}} className="toggle-btn cursor" hidden={tableData[i][val.enName+'hide'] ==2} 
              onClick={() => { tableData[i][val.enName+'hide'] = 2; this.setState({ tableData }) }}>展开<Icon type="down"/></span>
              <span className="toggle-btn cursor" hidden={tableData[i][val.enName+'hide'] != 2}
                onClick={() => { tableData[i][val.enName+'hide'] = 1; this.setState({ tableData }) }}>收起<Icon type="up"/></span>
            </span>:null
          }

　　

转载于:https://www.cnblogs.com/guidan/p/9816867.html