如何在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

希望這有助於！