时间戳

首页 > 解决方案 > 如果我在 react-select 中使用 optionsRenderer，如何使用 valueComponent 道具呈现所选项目

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

问题描述

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

什么有效

我的下拉列表正确显示了每个选项，所有选项都使用optionsRenderer道具自定义呈现...

反应选择选项自定义呈现

我得到了什么（如预期的那样）

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

输入的值是选项中的标签键

我想要达到的目标

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

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

使用 valueComponent 呈现的自定义值

...

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

下面的函数是optionRendererprops 所期望的，并迭代提供的选项。

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

  div
   strong $#{option.otherHTMLData}
`

但valueComponent只需要 1 个静态组件。因此任何功能都像() => <span>Will show this</span>

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

标签： javascriptreactjsreact-select

解决方案

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

有关一些简单示例，请参阅组件文档。

推荐阅读