Question

我正在使用react-select创建一个对地址进行地理编码的选择框，然后提供该搜索返回的相应地方政府区域的下拉列表。

我只是尝试格式化每个选项，以便显示状态，例如。昆士兰州在当地政府区域后例如。布里斯班。

所以我试图让它返回类似的内容：

Brisbane <small>Queensland</small>

但在HTML中，它会转义并呈现标记。

看起来像optionRenderer可以工作，但它似乎只能与react-select的Select组件一起使用，我目前正在使用Async，因为我想等待Mapbox的地理编码纬度和经度。

任何人都知道在使用<Async />组件时格式化选项的方法吗？

Answer 1

好的，所以我弄清楚我做错了什么。毕竟optionRenderer={this.renderOption}道具正在工作，但我返回的是一个字符串而不是JSX组件。

所以，对于今后遇到此问题的人来说，无论如何，这是我的方法：

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

所以我只需要将option.label分开并将State放在标签之间。