Question

我是一个React Noob，也是反应选择（v2）的新手。

我认为我们的情况很简单。我们正在从Azure搜索（构面）中提取数据，并希望绑定到稍微自定义的反应选择控件。

我们要：

添加徽章/药丸以在下拉列表中显示计数。
避免在返回的数据之间循环以使值重复并在react-select选项中标记。

在此示例的帮助下，我们已经完成了大部分工作（比正式文档IMO更有用）：React-Select - Replacing Components for custom option content。唯一缺少的是应用默认的react-select样式（例如：用于悬停）。

数据示例：

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>
    );
};

有没有办法重用默认的反应选择样式？我在文档中缺少什么吗？

Answer 1

您真是布，但让我向您展示如何保持react-select的原始样式和行为。

您无需使用Option组件的新容器，而只需使用原始容器并仅编辑以下内容：

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>
  );
};

这里live example的代码已更新。

定义自定义选项组件时，如何为反应选择应用默认样式？

1 个答案: