Question

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

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

Answer 1

我意识到我并没有直接回答你的问题，但我认为对于你所描述的实际用例，你最好不要使用一些预建工具。

react-css-transition-replace解决了这个问题。您需要做的就是应用CSS过渡类并渲染所需的幻灯片组件。

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

1 个答案: