反应.js和具有动态宽度的水平IScroll 5

React.js and horizontal IScroll 5 with dynamic width

本文关键字：水平 IScroll 动态 js 反应      更新时间：2023-09-26

我不能让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>
    );
}
});

子标题菜单组件接收项目列表作为道具。如果我在 CSS 中为 .scroller 设置宽度，这工作正常：

.scroller { width: 600px; ... }

但是在CSS中没有宽度，它不会滚动。

如何处理每个列表项的动态宽度？

有一个用于 react 和 IScroll 的 npm 包：

https://www.npmjs.com/package/react-iscroll

相关文章：