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

Question

我是新来的反应，我敢肯定我不是唯一一个有这个问题的人。我的组件中有一个宽度为 100% 的 div；我需要计算它的像素宽度。我该怎么做？

从我的实际用例来看，这就是我正在做的事情： 我正在构建一个响应滑块。我的滑块有一个 div，该 div 内部的类名为“slide-holder”是幻灯片的单个 div。滑块是一个非常基本的滑块，幻灯片支架将水平移动一张幻灯片的宽度以更改为下一张/上一张幻灯片。

这是我的完整代码 - 请注意，我仍在积极处理此问题，因此它有时可能会中断，但您应该能够从中了解它是如何工作的，我只是在做 react 的基础知识还没有什么花哨的。

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 过渡类并渲染所需的幻灯片组件。