React JSで要素マージンを取得する方法

Question

Reactでスライダを作成しようとしています。次のように

私のコンポーネントは次のとおりです。

outterDivStyles() { 
     return { 
      position: "relative", 
      width: "100%", 
      overflow: "hidden", 
      height: this.props.height || 200 
     } 
    } 

innerDivStyles(){ 
    return { 
     position: "absolute", 
     top: 0, 
     left: this.state.left, 
     right: 0, 
     width: "1000%", 
     transition: "left .5s", 
     transitionTimingFunction: "ease" 
    } 
} 

renderArrows(){ 
    return (
     <div className="next-prev" style={{height: this.props.height || 200}}> 
      <div onClick={this.prevSlide.bind(this)}><img src={images.slider_arrow_left_png} /></div> 
      <div onClick={this.nextSlide.bind(this)}><img src={images.slider_arrow_right_png} /></div> 
     </div> 
    ) 
} 


render(){ 
return(
<div> 
    <div ref="detailsOutterDiv" className="detailsOutterDiv" style={this.outterDivStyles()}> 
     <div ref="detailsInnerDiv" className="detailsInnerDiv" style={this.innerDivStyles()}> 
       {this.carInfo().photos.map((p, i) => { 
        return (
         <div key={i} className="slide"><img src={p.image_url}/></div> 
       ); 
       })} 
     </div> 
     {this.renderArrows()} 
    </div> 
</div> 
) 
} 

次のようにCSSは次のとおりです。

.slide{ 
    margin-right: 15px; 
    display: inline-block; 
} 

.slide img{ 
    width: 100%; 
    height: auto; 
} 


@media (min-width: 1599px) { 
    .detailsOutterDiv .detailsInnerDiv div{ 
    width: (10%/3); 

    } 
} 

今、私はクラスslideとdiv要素の幅にマージンを取得しようとしています。

私はそれをやろう：

let slideWidth = this.refs["detailsInnerDiv"].childNodes[0].style.marginRight;

しかしslideWidthは0

何かアドバイスありますか？

Answer 1

これを試してください。

let node = this.refs["detailsInnerDiv"].childNodes[0] //assuming this as your target node 
let nodeStyle = window.getComputedStyle(node) 
let slideMarginRight = nodeStyle.getPropertyValue('margin-right') 

詳細情報については、このことができますMDN

希望を参照してください！