Reactjs 定义自定义选项组件时，如何应用react select的默认样式？

我是React noob，也是React select（v2）的新手

我认为我们的情况相当简单。我们正在从Azure Search（facets）中提取数据，并希望绑定到稍微定制的react select控件

我们希望：

添加徽章/药丸以在下拉列表中显示计数

避免在返回的数据中循环复制值，并在react select选项中添加标签

在这个例子的帮助下（比IMO的官方文档更有用），我们已经获得了大部分的方法。唯一缺少的是应用默认的反应选择样式（例如：for hover）

数据示例：

const myOptions = [
    { value: 'foo', count: 100 },
    { value: 'bar', count: 200 },

];

自定义控件示例：

const CustomOption = (props:any) => {
    const { innerProps, innerRef } = props;
    return (
        <article ref={innerRef} {...innerProps} >
            <div style={{display:"inline-block"}}>{props.data.value}</div>
            <span className="badge badge-light float-right" style={{display:"inline-block"}}>{props.data.count} </span>
        </article>
    );
};

constcustomoption=（道具：任意）=>{
常量{innerProps，innerRef}=props；
返回(
{props.data.value}
{props.data.count}
);
};

---

有没有一种方法可以重用默认的react select样式？我在文档中遗漏了什么吗？

你真的是一块布，但让我告诉你如何保持

react select

的原始样式和行为

您不需要为

选项

组件声明新的容器，而需要使用原始容器，只需编辑如下内容：

const Option = props => {
  return (
    <components.Option {...props}>
      <div style={{ display: "inline-block" }}>{props.data.value}</div>
      <span
        className="badge badge-light float-right"
        style={{ display: "inline-block" }}
      >
        {props.data.count}{" "}
      </span>
    </components.Option>
  );
};

const Option=props=>{
返回(
{props.data.value}
{props.data.count}{'}
);
};

---

这里有一段代码已更新。

这非常适合于下拉样式。非常感谢。但是，选择一个不会显示任何文本。也许这是数据模型的一个局限性。你认为如果我澄清这个问题或将问题分成多个问题会有帮助吗？@Jaydrus这是因为你将选项声明为以下结构

[{value:…，count:…}]

，而不是

[{value:…，label:…}]

，所以我更新了我的实时示例，以便你可以看到它的实际效果。