Reactjs, как получить размеры элемента

, так что в основном я хочу получить размеры элемента div внутри метода возврата компонента. Я получаю ссылку на это по ref, и я хочу получить его ширину и высоту с getBoundingClientRect(), но есть ошибка: Uncaught TypeError: Cannot read property 'getBoundingClientRect' of undefined. Я также пробовал offsetWidth и offsetHeight.Reactjs, как получить размеры элемента

Вот мой код:

import React from 'react'; 
 
import ReactDOM from 'react-dom'; 
 
import Style from 'style-it'; 
 
var Ink = require('react-ink'); 
 
import FontIcon from '../FontIcon/FontIcon'; 
 

 
var IconButton = React.createClass({ 
 

 
    getInitialState() { 
 
     return { 
 
      iconStyle: this.props.iconStyle, 
 
     \t style: this.props.style, 
 
      cursorPos: {}, 
 
     }; 
 
    }, 
 

 
    extend(obj, src) { 
 
     Object.keys(src).forEach(function(key) { obj[key] = src[key]; }); 
 
     return obj; 
 
    }, 
 

 
    Tooltip() { 
 
    \t var box = this.refs.button.getBoundingClientRect(), 
 
     \t  Height = box.clientHeight, 
 
    \t  tooltipStyle = { 
 
    \t \t }; 
 

 
\t  return <div className="tooltip" style={tooltipStyle}>{this.props.tooltip}</div>; 
 
    \t }, 
 

 
    \t showTooltip(){ 
 
    \t }, 
 

 
\t removeTooltip(){ 
 
\t }, 
 

 
    render() { 
 

 
    var _props = this.props, 
 
     Tooltip = this.Tooltip, 
 
    \t opts, 
 
     disabled = false, 
 
     rippleOpacity, 
 
    \t outterStyleMy = { 
 
\t   border: "none", 
 
\t  \t outline: "none", 
 
\t  \t padding: "8px 10px", 
 
\t   backgroundColor: "red", 
 
\t   borderRadius: 100 + "%", 
 
\t   cursor: "pointer", 
 
    \t }, 
 
    \t iconStyleMy = { 
 
    \t \t fontSize: 12 + "px", 
 
    \t \t textDecoration: "none", 
 
    \t \t textAlign: "center", 
 
    \t \t display: 'flex', 
 
\t \t  justifyContent: 'center', 
 
\t \t  alignItems: 'center', 
 
    \t }, 
 
     rippleStyle = { 
 
     color: "rgba(0,0,0,0.5)", 
 
     }; 
 

 
    if (_props.disabled || _props.disableTouchRipple) { 
 
     rippleStyle.opacity = 0; 
 
    }; 
 

 
    if (_props.disabled) { 
 
     disabled = true; 
 
    }; 
 

 
    if (this.state.labelStyle) { 
 
    \t iconStyleMy = this.state.iconStyle; 
 
    }; 
 

 
    \t if (this.state.style) { 
 
     outterStyleMy = this.state.style; 
 
    }; 
 

 
    if (_props.href) { 
 
     opts.href = _props.href; 
 
    }; 
 

 
\t var buttonStyle = this.extend(outterStyleMy, iconStyleMy); 
 

 
    \t return(
 
     <Style> 
 
     {` 
 
      .IconButton{ 
 
      position: relative; 
 
      } 
 
      .IconButton:disabled{ 
 
      color: ${_props.disabledColor}; 
 
      } 
 
      .btnhref{ 
 
      text-decoration: none; 
 
      } 
 
     `} 
 
     <a {...opts} className="btnhref" > 
 
     <Tooltip /> 
 
      <button ref="button" className={"IconButton" + _props.className} disabled={disabled} style={buttonStyle} 
 
      onMouseEnter={this.showTooltip} onMouseLeave={this.removeTooltip} > 
 
      <Ink background={true} style={rippleStyle} opacity={rippleOpacity} /> 
 
      <FontIcon className={_props.iconClassName}/> 
 
      </button> 
 
     </a> 
 
     </Style> 
 
\t \t); 
 

 
    } 
 
}); 
 

 
ReactDOM.render(
 
<IconButton href="" className="" iconStyle="" style="" iconClassName="face" disabled="" disableTouchRipple="" tooltip="aaaaa" />, 
 
document.getElementById('app') 
 
);

Так что ... Я не знаю, как это сделать.

источник

2017-01-04 Karol

Вы не можете получить ссылку на узел DOM перед его визуализацией.

Сделайте свой this.refs.button.getBoundingClientRect() в методе жизненного цикла componentDidMount, чтобы убедиться, что он был визуализирован, и вы можете получить ссылку на него.

источник

2017-01-04 17:05:13

Большое спасибо, это работает :) – Karol

Reactjs, как получить размеры элемента

ответ

Смежные вопросы