如何在react.js中查询div 100％宽度元素的px宽度？

我是新来的反应，我敢肯定我不是唯一一个有这个问题的人。我的组件中有一个div，宽度为100％;我需要计算它的像素宽度。我将如何做到这一点？如何在react.js中查询div 100％宽度元素的px宽度？

把这个放在我的实际用例的角度来看，这就是我在做的事情：我正在建立一个反应滑块。我的滑块有一个div，这个div里面的类名“slide-holder”是幻灯片的单独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"));

来源

2016-09-18 TheWebTech

我意识到我实际上并没有直接回答你的问题，但我认为你所描述的实际用例，你会更好使用一些预置的工具。

react-css-transition-replace解决了这个确切的问题。您只需应用CSS过渡类并呈现所需的幻灯片组件。

来源

2016-09-18 03:53:42 gravityplanx

我很欣赏你指向我的资源，它会派上用场，如果我最终添加了使其淡入淡出和其他过渡的能力，但似乎这样做是为了伪造滑动效果实际上比做它更复杂我所指的方式。 – TheWebTech

CSS的'translate'属性可以完美地滑动。如果您想要在家中开发解决方案，请随时忽略，但我真的会鼓励使用此软件包。在可能的情况下管理CSS中的转换和动画通常是一个好主意，而不是用javascript来做。 – gravityplanx

如何在react.js中查询div 100％宽度元素的px宽度？

回答

相关问题