具有動態寬度的React.js和水平IScroll 5

Question

我不能讓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中沒有寬度，則不會滾動。

如何處理每個列表項的動態寬度？

Answer 1

有一個npm-package用於react和IScroll：

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