react.js内のdivの100％幅の要素のピクセル幅を照会する方法は？

Question

私は反応が新しく、私はこの質問の唯一の人ではないと確信しています。私はwidth：100％のコンポーネントをdivに持っています。ピクセル幅を計算する必要があります。どうすればいい？

これを私の実際のユースケースの視点に置くと、ここに私がやっていることがあります： 私はリアクションのスライダーを構築しています。私のスライダーには、このdivの中のクラス名 "slide-holder"を持つdivがあり、スライドのための個々のdivがあります。スライダーは非常に基本的なスライダーで、スライドホルダーは1つのスライドの幅を水平方向に移動して次/前のスライドに移動します。

ここに私のフルコードがあります - 私はまだこれを積極的に取り組んでいるので、時折壊れるかもしれませんが、あなたはそれがどのように機能するかを知ることができるはずです。まだ何も反応しない。

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")); 

Answer 1

私は私が実際に直接あなたの質問に答えていないよ実現する、私はあなたが説明してきた実際のユースケースのために、あなたには、いくつかのビルド済みのツールを使用したほうが良いと思います。

react-css-transition-replaceは、この正確な問題を解決します。 CSSトランジションクラスを適用して、目的のスライドコンポーネントをレンダリングするだけです。