Как запросить ширину в пикселях элемента шириной 100% div в react.js?

Я новичок в реакции и уверен, что не единственный, кто задает этот вопрос. У меня есть div в моем компоненте шириной: 100%; Мне нужно рассчитать его ширину в пикселях. Как бы я это сделал?

Чтобы представить это с точки зрения моего фактического варианта использования, вот что я делаю: я создаю слайдер в реакции. У моего слайдера есть div с именем класса «слайд-держатель» внутри этого div, которые являются отдельными div для слайдов. Ползунок - это очень простой слайдер, и держатель слайда будет перемещаться по горизонтали на ширину одного слайда, чтобы перейти к следующему / предыдущему слайду.

Вот мой полный код - имейте в виду, что я все еще активно работаю над этим, поэтому он может иногда ломаться, но вы должны иметь представление о том, как это работает, я просто делаю основы, пока не реагирую, ничего особенного .

http://codepen.io/thewebtech/pen/JRXybb?editors=0110

    /*var React = require("react");
var ReactDOM = require('react-dom');*/
var Slide = React.createClass({
  render: function() {
    return (<div className="slide" style={{backgroundImage:'url(' + this.props.imgsrc + ')'}}>
        <div className="caption">{this.props.children}</div>
      </div>);
  }
});

var SliderControlButton = React.createClass({

  render: function() {
    var btnClasses="slider-control-button "+this.props.direction;

    return (
      <button className={btnClasses}>
        {this.props.direction}
      </button>
    );
  }
});

var SliderControls = React.createClass({
  render: function() {
    return (
      <div className="slider-controls">
        <SliderControlButton direction="left"/>         <SliderControlButton direction="right"/>
      </div>
    );
  }
});
var SliderHolder = React.createClass({
  getInitialState:function(){
    var setWidth= React.Children.count(this.props.children)* 200+"px";
    var setSlideWidth= setWidth / React.Children.count(this.props.children);
    return{width: setWidth,
           slideWidth: setSlideWidth

          }


  },
  render:function(){

    return (
    <div className="slide-holder" style={{width: this.state.width}}>
        {this.props.children}
        </div>
    )

  }

});

function renderChildren(props) {
  return React.Children.map(props.children, child => {
    if (child.type === Slide)
      return React.cloneElement(child, {
        name: props.name
      })
    else
      return child
  })
}


var Slider = React.createClass({
  render: function() {
    return (
      <div className="slider">
        <SliderControls/>
        <SliderHolder>
            <Slide imgsrc="http://jonmclarendesigns.com/wedding/wp-content/uploads/2016/09/DSC_4050.jpg">hello</Slide>
          <Slide imgsrc="http://jonmclarendesigns.com/wedding/wp-content/uploads/2016/09/DSC_3819.jpg"/>
        </SliderHolder>
      </div>
    );
  }
});

ReactDOM.render(<Slider/>, document.getElementById("app"));