[英]React.js and horizontal IScroll 5 with dynamic width
我不能让IScroll与React.js一起使用。
var SubHeaderMenu = React.createClass({
getDefaultProps: function () {
return {items: []};
},
componentDidMount: function () {
if (this.props.items.length && this.isMounted()) {
this.scroll = new IScroll(this.getDOMNode(), {
scrollX: true,
scrollY: false,
mouseWheel: true,
});
}
},
render: function () {
var itemNodes = this.props.items.map(function (item) {
return <div key={item.name} className="subheader-item">{item.name}</div>;
}.bind(this));
return (
<div className="bar bar-standard bar-header-secondary subheader">
<div className="scroller" ref="scroller">
<div className="scroller-inner" ref="scrollerInner">{itemNodes}</div>
</div>
</div>
);
}
});
SubHeaderMenu组件接收项目列表作为道具。 如果我在CSS中为.scroller
设置了宽度,这将很好地工作:
.scroller { width: 600px; ... }
但是CSS中没有宽度,则不会滚动。
如何处理每个列表项的动态宽度?
有一个npm-package用于react和IScroll:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.