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> 
     ); 
    } 
}); 

你將如何在更多的信息傳遞到這個零件？