反应选择自定义标题答案

【问题标题】：react-select custom heading反应选择自定义标题
【发布时间】：2019-10-15 10:52:54
【问题描述】：

如何使用 react select 为选定的值设置自定义组件，我能够自定义选项，但是选定的选项本身怎么样，如果选择的组件也与选项相同，有什么想法吗？

<Select 
 components={{ Option: CustomOption }}
 options={options} 
 styles={customStyles} 
/>;

组件：

    const CustomOption =  ({ value, label, innerProps, innerRef }) => (
        <div ref={innerRef {...innerProps}>
        <img src={label === 'En' ? pngEn : label === 'Ru' ? pngRu : pngLt} />
       <div>{label}</div>
</div>
);

编辑，下面的选项，我想看到标志然后选择选项，这可能是因为自定义选项：

const options = [
  { value: "lt", label: "Lt" },
  { value: "en", label: "En" },
  { value: "ru", label: "Ru" },
];

【问题讨论】：

您能分享一些您想要实现的定制的设计或确切想法吗？谢谢
@Laura 附加图片。没有出现标志图标然后选择了项目。

标签： reactjs react-select

【解决方案1】：

我认为最简单的方法是完全按照您的方式使用自定义 Option 组件，并在您的 options 中存储一个额外的道具来获得您想要显示的相应图片。

下面是一个使用react-icons 库而不是使用图像的示例，但想法是一样的：

const Option = props => {
  const CComponent = props.data.icon;
  return (
    <div style={{ display: "flex" }}>
      <CComponent />
      <components.Option {...props} />
    </div>
  );
};
const options = [
  { label: "Option 1", value: 1, icon: FaOpera },
  { label: "Option 2", value: 2, icon: FaFirefox },
  { label: "Option 3", value: 3, icon: FaInternetExplorer }
];

function App() {
  return (
    <div className="App">
      <Select options={options} components={{ Option }} />
    </div>
  );
}

现场示例here。

【讨论】：