根据值在 react-select 中的选项旁边添加一些文本答案

【问题标题】：Adding some text next to an option in react-select based on the value根据值在 react-select 中的选项旁边添加一些文本
【发布时间】：2019-02-26 09:30:40
【问题描述】：

我正在使用 react-select 并且需要根据某些条件将文本添加到图像“默认类别”中。有什么方法可以实现吗？

我的代码：

renderCategories(categories) {
   const temp = [];
   categories.forEach((key) => {
        temp.push({label: key.name, value: key.id.toString()});
   });
   return temp;
}

<Field
 name="event_category"
 component={renderSelectField}
 placeholder="Select Event Category"
 options={this.renderCategories(categories)}
/>

其中renderSelectField是react-select的Select组件，使用redux-form，categories是一个包含id和name的对象数组。

【问题讨论】：

How can I use react-select to custom render subtext below each dropdown item?的可能重复

标签： reactjs redux redux-form react-select

【解决方案1】：

您可以通过为 react-select 提供您自己的自定义 Option 模板来做到这一点。有点像：

const OptionLayout = props => {
  const { innerProps, innerRef } = props;
  return (
    <article ref={innerRef} {...innerProps} className={'custom-option'}>
      <h4>{props.data.artist}</h4>
      <div className={'sub'}>{props.data.title} </div>
    </article>
  );
};

<Select {...selectProps} components={{Option: OptionLayout}} />

这与您的布局不匹配，但应该为您提供创建自己的自定义 Option 模板所需的内容。

【讨论】：