对于大多数用例，您可能不需要替换完整的 Option 组件。如果您希望保持与 Option 相同的整体结构和外观，但希望显示多个文本块、图像或对每个选项的正文进行一些其他特殊处理，则有一个更简单的方法大大地。

那就是使用formatOptionLabel渲染props。

import React from "react";
import ReactDOM from "react-dom";
import Select from "react-select";

const options = [
  { value: "Abe", label: "Abe", customAbbreviation: "A" },
  { value: "John", label: "John", customAbbreviation: "J" },
  { value: "Dustin", label: "Dustin", customAbbreviation: "D" }
];

const formatOptionLabel = ({ value, label, customAbbreviation }) => (
  <div style={{ display: "flex" }}>
    <div>{label}</div>
    <div style={{ marginLeft: "10px", color: "#ccc" }}>
      {customAbbreviation}
    </div>
  </div>
);

const CustomControl = () => (
  <Select
    defaultValue={options[0]}
    formatOptionLabel={formatOptionLabel}
    options={options}
  />
);

ReactDOM.render(<CustomControl />, document.getElementById("root"));

https://codesandbox.io/embed/reactselect-formatoptionlabel-bde1q

https://react-select.com/props - 搜索 formatOptionLabel

您可以通过在 components 属性中包含您的覆盖来替换任何组件。

<Select components={{Option: MyOption}} />

就像是：

const MyOption = 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 components={{Option: MyOption}} />

该innerRef和innerProps性能是非常重要的，因为它们承载喜欢通过期权所需的悬停和向前的onClick事情。该dataprops是你选择的数据。

通常，您确实想使用formatOptionLabelprop（没有额外的组件）。但如果你不这样做，你可以通过Option这种方式覆盖组件：

import Select, { components } from 'react-select';

const CustomOption = ({ children, ...props }) => {
  return (
    <components.Option {...props}>
      <img src={...} />
      {children}
    </components.Option>
  );
};

function App() {
  return (
    <Select components={{Option: CustomOption}} ... />
  );
}

在这里，我重用了股票组件 ( components.Option)。这样我就不需要关心innerRef什么了。

https://codesandbox.io/s/react-select-item-icon-2z3tb

如果您想在选择时设置您的选项的样式，您可以使用自定义选项，如下所示：

const customOption = (props) => (

{props.isSelected ? (
  <img className="custom-option__img" src={IconCheck} alt="" />
) : (
  ''
)}