ReactSelect：カスタムレンダリングで使用する余分なデータを渡します

Question

私はReact-Selectを使用しています。

は現在、私はelasticsearchからデータをフェッチし、状態に設定するのです：

var new_titles = [] 
body.hits.hits.forEach(function(obj){ // looping through elasticsearch 
    new_titles.push({value: obj._source.title_id, label: obj._source.title_name}) 
}) 
this.setState({titleResults: new_titles}) 

その後、私はthis.state.titleResultsを使用して、私のリアクトセレクトコンポーネントにそれを渡しています：

<Select autofocus optionComponent={DropdownOptions} options={this.state.titleResults} simpleValue clearable={this.state.clearable} name="selected-state" value={this.state.selectedTitleValue} onChange={this.handleTitleChosen} searchable={this.state.searchable} /> 

これが正常に動作します。しかし今、私がReact-Select componentOptionsを検索したときに、このタイトルに関する追加のメタデータを渡したいと思います。このような何か：

私だけ{value: obj._source.title_id, label: obj._source.title_name}に渡していますが、私は私のDropdownOptionコンポーネントによって使用されることをより多くの情報を渡したいと思います：

const DropdownOptions = React.createClass({ 
    propTypes: { 
     children: React.PropTypes.node, 
     className: React.PropTypes.string, 
     isDisabled: React.PropTypes.bool, 
     isFocused: React.PropTypes.bool, 
     isSelected: React.PropTypes.bool, 
     onFocus: React.PropTypes.func, 
     onSelect: React.PropTypes.func, 
     option: React.PropTypes.object.isRequired, 
    }, 
    handleMouseDown (event) { 
     event.preventDefault(); 
     event.stopPropagation(); 
     this.props.onSelect(this.props.option, event); 
    }, 
    handleMouseEnter (event) { 
     this.props.onFocus(this.props.option, event); 
    }, 
    handleMouseMove (event) { 
     if (this.props.isFocused) return; 
     this.props.onFocus(this.props.option, event); 
    }, 
    render() { 
     return (
      <div className={this.props.className} 
       onMouseDown={this.handleMouseDown} 
       onMouseEnter={this.handleMouseEnter} 
       onMouseMove={this.handleMouseMove} 
       title={this.props.option.title}> 
       <span>Testing Text</span> 
       {this.props.children} 
      </div> 
     ); 
    } 
}); 

あなたはこのにより多くの情報を渡すだろうか成分？