解决方案 1

当使用多个值Select与props时，您可以自定义控制芯片的样式，styles如下例所示：

const customStyles = {

    multiValue: (base, state) => ({
      ...base,
     // set all chips to a maximum of 100 pixels
      maxWidth: "100px"
    })
  };

这是长标签的较短版本的现场示例。我放置了特殊（且丑陋）的背景，以便您可以看到每个容器的开始和结束位置。

解决方案2

根据评论请求，这是剪切所选选项的替代解决方案。您可以MultiValue使用 prop覆盖组件components。在此组件中，您将可以访问选项标签和应用substring功能以尽可能短地截断标签。

const MultiValue = props => {
// truncate the string to 3 characters
   const content = props.children.substring(0, 3);
   return <components.MultiValue {...props}>{content}...</components.MultiValue>;
};

这是此替代选项的现场示例。

解决方案 3

与解决方案 2 的想法相同，如果您事先知道您的选项标签和要显示的作物，您可以在options数组中设置一个额外的props，如下所示：

const options = [
  {
    label:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi augue sem, bibendum quis mollis amet.",
    // you can name this new prop has you want
    chipLabel: "Lorem ipsum",
    value: "1"
  },
  {
    label:
      "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.",
    chipLabel: "Sed ut perspiciatis",
    value: "2"
  },
  {
    label:
      "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?",
    chipLabel: "Ut enim",
    value: "3"
  }
];

然后使用以下代码覆盖组件：

const MultiValue = props => (
  <components.MultiValue {...props}>
    {props.data.chipLabel}
  </components.MultiValue>
);

<Select options={options} components={{ MultiValue }} />

这里有一个活生生的例子。

单值解决方案

如果要显示与选择选项不同的值，SingleValue我建议使用解决方案 3 并像这样更改组件：

const SingleValue = props => (
  <components.SingleValue {...props}>
    {props.data.chipLabel}
  </components.SingleValue>
);

<Select options={options} components={{ SingleValue }} />

这里有一个活生生的例子。

在 React-select V1 中，如果您遇到下拉列表中向用户显示的 Selected Value 和 Options 必须不同的情况。有一个叫做 valueRenderer 的props。

valueRenderer : 返回以自定义方式呈现所选值的函数。它的签名是 function (option) { return option.value // 在此处添加任何逻辑以将显示的文本导出给用户 }

https://github.com/JedWatson/react-select/tree/v1.x