React virtualized-select 自定义选项样式答案

【问题标题】：React virtualized-select custom options stylesReact virtualized-select 自定义选项样式
【发布时间】：2017-12-28 04:58:00
【问题描述】：

我正在使用 virtualized-select React 组件。我想在下拉菜单中设置选项的文本和背景颜色。对于我下面的简单代码，搜索栏背景为红色，当我选择选项 1 时搜索栏背景变为蓝色，但我希望选项下拉列表中的背景为蓝色。此外，颜色属性似乎根本不起作用；只有某些 CSS 属性可以更改吗？

render () {

const styles = {
    color: "red",
    background: "red"
};

const options = [
  { label: "One", value: 1 , style: {background: 'blue'}},
  { label: "Two", value: 2 },
  { label: "Three", value: 3}
  //{ label: "Three", value: 3, disabled: true }
  // And so on...
]

return (
  <VirtualizedSelect
    options={options}
    onChange={(selectValue) => this.setState({ selectValue })}
    value={this.state.selectValue}
    placeholder="Search"
    style={styles}
  />
)
  }
}

【问题讨论】：

标签： javascript reactjs react-virtualized

【解决方案1】：

react-virtualized-select 目前不支持您在示例中显示的option.style 属性，仅支持option.className。（可以看到default optionRender source here。）

如果您想要像您描述的那样自定义选项样式，您需要override the optionRenderer as described in the docs。 react-virtualized-select demo page（在“自定义选项渲染器”下）有一个示例，该示例的源代码是 in the GitHub repo。

我建议分叉默认渲染器并进行自定义，如下所示：

function YourOptionRenderer ({ focusedOption, focusOption, key, labelKey, option, selectValue, style, valueArray }) {
  const className = ['VirtualizedSelectOption']
  if (option === focusedOption) {
    className.push('VirtualizedSelectFocusedOption')
  }
  if (option.disabled) {
    className.push('VirtualizedSelectDisabledOption')
  }
  if (valueArray && valueArray.indexOf(option) >= 0) {
    className.push('VirtualizedSelectSelectedOption')
  }

  const events = option.disabled
    ? {}
    : {
      onClick: () => selectValue(option),
      onMouseEnter: () => focusOption(option)
    }

  return (
    <div
      className={className.join(' ')}
      key={key}
      style={{
        ...style,
        ...option.style,
      }}
      title={option.title}
      {...events}
    >
      {option[labelKey]}
    </div>
  )
}

或者，如果您想向项目提交 PR 以向默认渲染器添加对 option.style 的支持，我愿意审查它。

【讨论】：