反应选择内联选项

Question

我正在使用react-select，我想知道如何使用optionRenderer显示我的内联选项。见下图：

#react-select

Answer 1

您可以在标签选项

中使用JSX

const options = [
  { 
    label: <div className="label-item">ORA</div>, 
    value="ORA" 
  }, ....
]

然后修改react-select类以自定义它（可能使用样式组件）

import 'styled' from 'styled-component'
import 'select' from 'react-select'
const StyleSelect = styled(select).`
  .select {
    .select-control { ... } 
  }
`

只需像普通StyleSelect

一样使用select