如果我在 react-select 中使用 optionsRenderer，如何使用 valueComponent 道具呈现所选项目答案

【问题标题】：How do I use valueComponent prop to render the selected Item if I am using optionsRenderer in react-select如果我在 react-select 中使用 optionsRenderer，如何使用 valueComponent 道具呈现所选项目
【发布时间】：2018-11-26 10:05:40
【问题描述】：

假设我的 react-select 组件具有以下道具。我正在使用 pug 语法。

什么有效

我的下拉菜单正确显示每个选项，所有选项都使用 optionsRenderer 属性自定义呈现...

我得到了什么（如预期）

但是我得到的结果是输入值只是我在option.label 字段中引用的文本。在第一个选项中，Custom 是我的标签键。

我想要达到的目标

使用valueComponent 来显示选项渲染器在选项下拉列表中显示的完全相同的 HTML。

这样，样式当然可以改进:)

...

  Select(
    options=this.getOptions()
    optionRenderer=customOption
    valueComponent=customOption // this doesn't work
    valueKey="id"
  )

optionRenderer 属性期望下面的函数并迭代提供的选项。

const customOption = (option) => pug`
  div
    strong #{option.label}
    p #{option.renderMethod}

  div
   strong $#{option.otherHTMLData}
`

但valueComponent 只需要 1 个静态组件。因此任何像() => <span>Will show this</span>这样的函数

如何使用valueComponent 获取选择用作输入值的选项？

【问题讨论】：

标签： javascript reactjs react-select

【解决方案1】：

ValueContainer 显示的标签取决于isMutli。如果isMulti 为假，您可以通过覆盖SingleValue 组件来控制此显示。如果isMulti 为真，则通过覆盖MultiValue 组件（更具体地说，它是MultiValueLabel 组件）来控制此显示。

有关一些简单示例，请参阅Components documentation。

【讨论】：