我想建立一個大帳篷中作出反應，如果某一段文字是比它更大的容器，但我不能讓容器的正確寬度，即使在該組件已呈現。陣營：無法獲取元素的正確寬度渲染後
我在另一個答案React 「after render」 code?閱讀，你必須使用requestAnimationFrame，我正在嘗試，它仍然無法正常工作。
如果我記錄容器的寬度，它顯示的寬度爲147px，這是在樣式表中使用min-width設置的，但正確的寬度應該是320px，當屏幕最小寬度爲600px時使用媒體查詢來設置320px 。
這是一個子組件，父被呈現在iframe內，如果這有什麼差別和iframe的寬度超過600像素。
的JS：
module.exports = React.createClass({
componentDidUpdate: function() {
// Setup marquee
this.initMarquee();
},
render: function() {
// Setup marquee
this.initMarquee();
var artistName = this.props.artist.artistName;
var trackName = this.props.track.trackName;
return (
<div className="MV-player-trackData no-select" ref="mvpTrackData">
<div className="MV-player-trackData-marquee-wrap" ref="mvpMarqueeWrap">
<div className="MV-player-trackData-marquee" ref="mvpMarquee">
<a className="MV-player-trackData-link no-select" href={this.props.storeUrl} target="_blank">
<span id="mvArtistName">{artistName}</span> – <span id="mvTrackName">{trackName}</span>
</a>
</div>
</div>
</div>
)
},
initMarquee: function() {
if (typeof requestAnimationFrame !== 'undefined') {
//store a this ref, and
var self = this;
//wait for a paint to setup marquee
window.requestAnimationFrame(function() {
self.marquee();
});
}
else {
// Suport older browsers
window.setTimeout(this.marquee, 2000);
}
},
marquee: function() {
var marquee = React.findDOMNode(this.refs.mvpMarquee);
var marqueeWrap = React.findDOMNode(this.refs.mvpMarqueeWrap);
// If the marquee is greater than its container then animate it
if (marquee.clientWidth > marqueeWrap.clientWidth) {
marquee.className += ' is-animated';
}
else {
marquee.className = marquee.className.replace('is-animated', '');
}
}
});
的CSS：
.MV-player-trackData-marquee-wrap {
height: 20px;
line-height: 20px;
min-width: 147px;
overflow: hidden;
position: relative;
width: 100%;
@media only screen and (min-width : 600px) {
min-width: 320px;
}
}
我已經嘗試了許多不同的解決方案，包括laidout和react-component-width-mixin，但他們都沒有工作。我嘗試了反應組件寬度mixin，因爲在我的應用程序的另一部分，我試圖獲得window.innerWidth的值，但是在渲染後也會返回0，除非我設置了約2秒的超時時間，不幸的是儘管有時2秒不長足夠的數據加載和其他回調，所以這可以很容易地制動。
任何幫助真的很感激。謝謝。
更新： 答案之一正確地指出，我應該叫this.initMarquee();內componentDidMount這是我在做什麼，不幸的是我貼的時候我測試，看它是否由內render差異調用它的錯誤代碼。正確的代碼如下所示：
componentDidMount: function() {
// Setup marquee
this.initMarquee();
},
不幸的是，這也不起作用，我仍然收到marqueeWrap的寬度不正確。
更新：24/06/2015 只是爲了澄清，這是marquee effect我想實現的，只有當文本比它的容器作爲大是沒有意義的滾動它時，它並不是越大。
而且，這裏是從陣營團隊談到爲何做出反應器油漆之前呈現給Github Issue的鏈接。 - 因此，我想知道如何可靠地獲取有問題的元素的寬度。
我不是100％清楚你的目標是什麼。你想保持你的內容溢出一個容器？你遇到的問題是什麼？ – badAdviceGuy
不，我希望我的內容在其容器大於其容器時自動水平滾動，如類似於選框效果，類似於此http://jsfiddle.net/jonathansampson/xxuxd/ –