Javascript ReactJS-将溢出的元素放入一个“&引用；下拉按钮

我的页面顶部有以下UI元素：

|[Static1] [Dynamic1] [Dynamic2] [Dynamic3]                [Static2]|

因此，

Static1

是一些向左粘贴的徽标组件，

Static2

是一些向右粘贴的用户菜单组件

现在在它里面我有一个集合组件，它显示了从DB加载的几个动态元素

如果没有太多的组件，一切都很好，但是如果有更多的组件，我不想要任何换行符，只有一些“更多”菜单，比如：

|[Static1] [Dynamic1] [Dynamic2] [Dynamic3] [Dynamic4][...][Static2]|

当我点击

[…]

按钮时，我不想看到动态组件的垂直列表

动态项列表存储在

ElementList

组件中，代码如下：

React.createClass({
    render() {
        return (
            <div ref="listparent">
                { this.props.elements.map((element) => {
                    return <Element
                        ref={"element-"+element.name}
                        key={element.name}
                    })}
            </div>
        )
    }
});

---

下面是我想做的一个粗略的JSFIDLE：我不知道这是不是最好的解决方案，或者它有多强大，但至少目前对我来说是有效的

JsFiddle：

var Dropdown=React.createClass({
getInitialState（）{
返回{
伊索彭：错
}
},
组件willmount（）{
document.addEventListener（'click'，this.handleClick，false）；
},
组件将卸载（）{
document.removeEventListener（'click'，this.handleClick，false）；
},
handleClick:函数（e）{
var component=ReactDOM.findDOMNode（this.refs.component）；
if（e.target==component | |$（component）.has（e.target.length）{
//组件内部
}
否则{
//外面
this.setState（{isOpen:false}）；
}
},
render（）
{
返回(
this.setState（{isOpen:！this.state.isOpen}）}>{this.props.Header}
{
this.state.isOpen&&(
this.setState（{isOpen:false}}>
{React.Children.map（this.props.Children，（item）=>item）}
)
}
);
}
});
var Card=React.createClass({
render（）{
让className=“card”；
如果（this.props.ishiden）
className+=“已隐藏”；
返回(
{this.props.name}
)
}
});
var Cards=React.createClass({
getInitialState（）{
返回{
vCard:[]，
hCards:[]，
lastSetCards:[]，
预计算：假，
莱多特：错
};
},
重排{
_.throttle（this.setState（{laidOut:false，preMounted:false}），100）；
},
componentDidMount（）{
window.addEventListener（'resize'，this.reareat'）；
},
组件将卸载（）{
window.removeEventListener（'resize'，this.reareat'）；
},
componentDidUpdate（）{
if（this.props.cards.length！=this.state.lastSetCards | |！this.state.preMounted）{
这是我的国家({
lastSetCards:this.props.cards.length，
vCards：这个。道具。卡片，
预先计算：是的，
莱多特：错
});
}
if（this.state.preMounted&&！this.state.laidOut）{
var元素=ReactDOM.findDOMNode（this.refs.listparent）；
让visibleCards=[]；
设hiddenCards=[]；
对于（var i=0；i
element.offsetTop+element.offsetHeight||
cardElement.offsetLeft+cardElement.offsetWidth>
element.offsetLeft+element.offsetWidth-160）{
隐藏卡片。推（卡片）；
}
否则{
可视卡。推（卡）；
}
}
}
这是我的国家({
vCards：可视卡，
hCards:hiddenCards，
莱多特：是的
});
}
},
render（）{
返回(
{this.state.vCards.map（（c）=>）}
{this.state.hCards.map（（c）=>）}
)
}
});
var Hello=React.createClass({
getInitialState（）{
返回{
卡片：[“一”、“二”]
};
},
componentDidMount（）{
这是我的国家({
卡片：[“一”、“二”、“三”、“四”、“五”、“六”、“七”、“八”，
“九”、“十”、“十一”、“十二”、“十三”、“十四”]
});
},
render:function（）{
让addNew=（）=>{
this.state.cards.push（“附加_”+this.state.cards.length）；
这是我的国家({
卡片：这个。状态。卡片
})
};
返回(
标志
使用者



添加
);
}
});
ReactDOM.render(
,
document.getElementById（'容器'）
);
.logo
{
浮动：左；
保证金：5px；
填充物：5px；
边框：纯色1px蓝色；
}
.用户
{
浮动：对；
保证金：5px；
填充物：5px；
边框：纯色1px蓝色；
}
.标题{
位置：相对位置；
最大高度：10px；
高度：10px；
宽度：100%；
}
.卡片
{
位置：相对位置；
显示：内联块；
垂直对齐：顶部；
空白：nowrap；
}
清楚的
{
明确：两者皆有；
}
卡片
{
显示：内联块；
保证金：5px；
填充物：5px；
边框：纯色1px蓝色；
}
.卡片顶部
{
显示：块；
空白：nowrap；
垂直对齐：顶部；
宽度：100%；
边框：绿色1px实心；
}
.下拉列表
{
显示：内联块；
}
.是隐藏的
{
显示：块；
}
.下拉按钮
{
保证金：5px；
填充物：5px；
边框：纯色1px蓝色；
}
它成功了，我不知道这是不是最好的解决方案，也不知道它有多强大，但至少目前对我有效

JsFiddle：


var Dropdown=React.createClass({
getInitialState（）{
复述
export default React.createClass({
        getInitialState(){
            return {
                visibleElements: this.props.elements,
                hiddenElements: []
            }
        },
        componentDidMount() {
            this.rearrange();
        },
        componentDidUpdate(){
            this.rearrange();
        },
        rearrange(){
            var element = ReactDOM.findDOMNode(this.refs.listparent);
            let visibleElements = [];
            let hiddenElements = [];
            for(var i=0; i< this.props.elements.length; i++)
            {
                var currentElement = this.props.elements[i];
                var domElement = ReactDOM.findDOMNode(this.refs["element-"+element.name]);
                if(domElement) {
                    if (domElement.offsetTop + domElement.offsetHeight >
                        element.offsetTop + element.offsetHeight ||
                        domElement.offsetLeft + domElement.offsetWidth >
                        element.offsetLeft + element.offsetWidth - 200) {
                        hiddenElements.push(currentElement);
                    }
                    else {
                        visibleElements.push(currentElement);
                    }
                }
            }
            if(this.state.visibleElements.length != visibleElements.length) {
                this.setState({
                    visibleElements: visibleElements,
                    hiddenElements: hiddenElements
                })
            }
        },
        render() {
            return (
                <div ref="listparent">
                    { this.state.visibleElements.map((element) => {
                        return <Element
                            ref={"element-"+element.name}
                            key={element.name} />
                        })}
                    { this.state.hiddenElements.length >0 &&
                            <DropdownMenu
                                Header="..."
                            >
                                { this.state.hiddenElements.map((element) => {
                                    return <Element
                                        ref={"element-"+element.name}
                                        key={element.name} />
                                    })}
                            </DropdownMenu>
                    }
                </div>
            )
        }
    });