react-select: How can I use the optionRenderer prop with the Async component?

问题

I am using react-select to make a select box that geocodes an address and then provides a drop down list of the corresponding local government areas of that search returns.

I am just trying to format each option so it shows the State eg. Queensland after the local government area eg. Brisbane.

So I'm trying to get it to return something like:

Brisbane <small>Queensland</small>

But in the HTML it escapes and renders the tags.

It looks like optionRenderer would work, but it seems to be only available with the Select component of react-select and I am currently using Async because I want to wait for the geocoded latitude and longitude from Mapbox.

Anyone know a way to format options while using the <Async /> component?

回答1:

OK so I worked out what I was doing wrong. The optionRenderer={this.renderOption} prop was working after all but I was returning a string instead of a JSX component.

So here's my method anyway for anyone who has this issue in the future:

renderOption(option) {
  return <div> {option.label} <small>small</small></div>;
}

So I'll just need to split the option.label up and put the State in between the tags.

来源：https://stackoverflow.com/questions/50324434/react-select-how-can-i-use-the-optionrenderer-prop-with-the-async-component