zoukankan      html  css  js  c++  java
  • 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
              }
    

      

  • 相关阅读:
    rest-framework组件 之 视图三部曲
    跨域问题通用解决方案
    rest-framework组件 之 序列化
    vue 之 表单输入绑定
    决策树剪枝
    数据库优化
    python实现一个二分查找
    使用faker去构造一个User-Agent
    数据库三大范式
    Mysql数据库中索引的概念总结
  • 原文地址:https://www.cnblogs.com/guidan/p/9816867.html
Copyright © 2011-2022 走看看