ReactSelect 渲染自定义组件

Question

我正在以我的一种形式使用 ReactSelect：

 <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 ：

 optionsComponent={DropdownOptions}

通过查看 示例，您可以呈现自定义组件，因此我已经测试过：

 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> 。但事实并非如此。我究竟做错了什么？

我的最终目标是让我的选项显示如下各种数据：

原文由 ApathyBear 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

该属性是 optionComponent 不是 optionsComponent 你写的。

原文由 Michael Camden 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用 react-select V2 ，您可以通过访问传递给自定义组件的 data 道具来实现此目的，您传递给 components 道具 <Select />

 const Option = (props) => {
  const {
    ...
    data,
  } = props
  return (
    <div ...>
      {`${data.firstName} - ${data.lastName}`}
    </div>
  )
}

<Select
    ...
    components={{ Option }}
    ...
  />

原文由 Natan Sabbah 发布，翻译遵循 CC BY-SA 4.0 许可协议