反应选择自定义标题

Question

如何使用 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" },
];

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

活生生的例子在这里。