ReactSelect私は私のいずれかの形式でReactSelectを使用していますレンダリングカスタムコンポーネント

Question

は：あなたは、exampleを見ることによって

optionsComponent={DropdownOptions} 

：

<Select name='event-title' className="event-title" ref="stateSelect" autofocus optionsComponent={DropdownOptions} onInputChange={this.handleChangeTitle} options={this.state.titleResults} simpleValue clearable={this.state.clearable} name="selected-state" value={this.state.selectedTitleValue} onChange={this.handleTitleChosen} searchable={this.state.searchable} /> 

は、私は、カスタムoptionsComponentをレンダリングしたいのですがカスタムコンポーネントをレンダリングできるようにして、私はそれをテストしました：

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

すべての子の前に<span>Testing Text</span>をレンダリングします。そうではありません。私は間違って何をしていますか？

私の最終目標は、私のオプションは、このような様々なデータを表示することです：

Answer 1

プロパティは、あなたが書いているようoptionComponentないoptionsComponentです。