ReactJS-将溢出的元素放入一个“"下拉按钮

我不知道这是否是最好的解决方案，也不知道它有多健壮，但至少目前对我来说是有效的。

Js报价：https://jsfiddle.net/1w6m1n6h/

var Dropdown = React.createClass({
    getInitialState(){
      return {
          isOpen: false
      }
    },
    componentWillMount() {
        document.addEventListener('click', this.handleClick, false);
    },
    componentWillUnmount() {
        document.removeEventListener('click', this.handleClick, false);
    },
    handleClick: function (e) {
        var component = ReactDOM.findDOMNode(this.refs.component);
        if (e.target == component || $(component).has(e.target).length) {
            // Inside the component
        }
        else{
            // Outide
            this.setState({ isOpen: false});
        }
    },
    render()
    {
        return (
          <div ref="component" className="dropdown">
              <div className="dropdown-button" onClick={() => this.setState({ isOpen : !this.state.isOpen})}>{this.props.Header}</div>
              {
                    this.state.isOpen && (
                        <div className="dropdown-menu"  onClick={() => this.setState({ isOpen : false})}>
                            {React.Children.map(this.props.children, (item) => item)}
                        </div>
                        )
              }
          </div>
        );
    }
});
var Card = React.createClass({
  render() {
    let className = "card";
    if(this.props.isHidden)
       className += " is-hidden";
    return (
      <div className={className}>{this.props.name}</div>
    )
  }
});
var Cards = React.createClass({
 getInitialState() {
 		return {
    		vCards: [],
        hCards: [],
        lastSetCards: [],
        preMounted: false,
        laidOut: false
    };
 },
 rearrange() {
 		_.throttle(this.setState({laidOut: false, preMounted: false}), 100);
 },
   componentDidMount() {
    window.addEventListener('resize', this.rearrange);
  },
  componentWillUnmount() {
    window.removeEventListener('resize', this.rearrange);
  },
 componentDidUpdate() {
    if(this.props.cards.length != this.state.lastSetCards || !this.state.preMounted) {
    	
    	this.setState({
                lastSetCards: this.props.cards.length,
                vCards: this.props.cards,
                preMounted: true,
                laidOut: false
                });
    }
    if(this.state.preMounted && !this.state.laidOut) {
         var element = ReactDOM.findDOMNode(this.refs.listparent);
        let visibleCards = [];
        let hiddenCards = [];
        for(var i=0; i< this.props.cards.length; i++)
        {
            var card = this.props.cards[i];
            var cardElement = ReactDOM.findDOMNode(this.refs["card-"+card]);
            if(cardElement) {
                if (cardElement.offsetTop + cardElement.offsetHeight >
                    element.offsetTop + element.offsetHeight ||
                    cardElement.offsetLeft + cardElement.offsetWidth >
                    element.offsetLeft + element.offsetWidth - 160) {
                    hiddenCards.push(card);
                }
                else {
                    visibleCards.push(card);
                }
            }
        }
        this.setState({
        		vCards: visibleCards,
            hCards: hiddenCards,
            laidOut: true
        });
    }
 },
 render() {
     return (<div className="cards-top" ref="listparent">
     				<div className="cards" >
            {this.state.vCards.map((c)=> <Card ref={"card-"+c} key={c} name={c} />)}
            </div>
            <Dropdown Header="MORE">
            {this.state.hCards.map((c)=> <Card isHidden={true} key={c} name={c} />)}
            </Dropdown>
            </div>
            )
 }
});
var Hello = React.createClass({
		getInitialState() {
    		return {
    		cards: ["one", "two" ]
                };
    },
    componentDidMount() {
    		this.setState({
        		cards: ["one", "two", "three", "four", "five", "six", "seven", "eight",
        				"nine", "ten", "eleven", "twelve", "thirteen", "fourteen"]
        });
    },
    render: function() {
    		let addNew = () => { 
        			this.state.cards.push("additional_"+this.state.cards.length);
              this.setState({
              		cards: this.state.cards
              })
			  };
        return (
        <div>
        <div className="header">
        		<div className="logo">Logo</div>
            <div className="user">User</div>
            <Cards cards={this.state.cards} />
            <div className="clear"></div>
        </div>
        <br/><br/>
        <button onClick={addNew}>Add</button>
        </div>);
    }
});
 
ReactDOM.render(
	<Hello name="World" />,
    document.getElementById('container')
);

.logo
{
  float: left;
    margin: 5px;
  padding: 5px;
  border: solid 1px blue;
}
.user
{
  float: right;
    margin: 5px;
  padding: 5px;
  border: solid 1px blue;
}
.header{
  position: relative;
  max-height: 10px;
  height: 10px;
  width: 100%;
}
.cards
{
  position: relative;
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
}
.clear
{
  clear: both;
}
.card
{
  display: inline-block;
  margin: 5px;
  padding: 5px;
  border: solid 1px blue;
}
.cards-top
{
   display: block;  
    white-space: nowrap;
    vertical-align: top;
    width: 100%;
    border: green 1px solid;
}
.dropdown
{
  display: inline-block;
}
.is-hidden
{
  display: block;
}
.dropdown-button
{
  margin: 5px;
  padding: 5px;
  border: solid 1px blue;
}

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>