React-Select - Replacing Components for custom option content

前端未结

关注

 3  1189

渐次进展 2021-02-02 12:51

Using React-Select (version 2) I would like to have custom designed (select) options.

The documentation suggests that Replacing Components would be a method that I could

3条回答

温柔的废话 (楼主)

2021-02-02 13:36

For a majority of use cases, you probably don't need to replace the full Option component. If you're looking to stay with the same overall structure and look and feel of the Option, but you want to display several blocks of text, or an image, or some other special treatment to the body of each option, there is an easier way.

That's to use the formatOptionLabel render prop.

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 }) => (
  
    {label}
    
      {customAbbreviation}
    
  
);

const CustomControl = () => (


    提交评论