反应选择多行标签答案

【问题标题】：React Select multiline labels反应选择多行标签
【发布时间】：2018-12-06 18:24:08
【问题描述】：

有没有办法使用 react-select 来设置多行标签或为一个选项设置两个标签？

我通过值和标签传递选择组件选项

value: someValue,
label: "This is my first value - Name: Value 1 \n Foo Bar Date Insert 
Today's Date Here"

我已尝试插入换行符，但文本仍保留在选择输入中的一行。我正在寻找一种解决方案，每个选项有两行。

【问题讨论】：

【解决方案1】：

您可以保留\n 换行符并将white-space: pre-wrap 添加到标签中：

.Select-value-label, .Select-option {
  white-space: pre-wrap;
}

【讨论】：

【解决方案2】：

使用\n 作为换行符并执行以下操作：

JSX

添加一个classNamePrefix，这样就可以使用类来设置 react-select 元素的样式：

<Select
  options={...}
  classNamePrefix="lp-copy-sel"
  ...
/>

.lp-copy-sel__option, .lp-copy-sel__single-value{
  white-space: pre-wrap !important;
}
.lp-copy-sel__value-container {
  height:5em;
}

您可以添加menuIsOpen 以便能够检查各种元素及其类。

<Select
  options={...}
  classNamePrefix="lp-copy-sel"
  menuIsOpen
  ...
/>

【讨论】：