reactjs - 如何使用 react-select 在每个下拉项下自定义渲染潜台词？

Question

我试图弄清楚如何利用 react-select 中的自定义组件来呈现包含带有潜台词的项目的下拉列表。

我查看了以下每个组件:https://react-select.com/components并且不确定哪一个最适合我的需求。

从组件列表来看，我相信option组件用于类似的东西，可能会起作用，但我不确定。有人可以验证我的想法吗？

Answer 1

React-select V2+ 解决方案:

你说得对，使用 Option组件将允许您格式化 menuList 中的每个选项像下面的例子:

const options = [
  {
    label: "text 1",
    subLabel: "subtext 1",
    value: "1"
  },
  {
    label: "text 2",
    subLabel: "subtext 2",
    value: "2"
  },
  {
    label: "text 3",
    subLabel: "subtext 3",
    value: "3"
  },
  {
    label: "text 4",
    subLabel: "subtext 4",
    value: "4"
  }
];

const Option = props => {
  return (
    <components.Option {...props}>
      <div>{props.data.label}</div>
      <div style={{ fontSize: 12 }}>{props.data.subLabel}</div>
    </components.Option>
  );
};

function App() {
  return (
    <div className="App">
      <Select options={options} components={{ Option }} />
    </div>
  );
}

这里有 live example .

React-select V1 解决方案:

保持与 V2 解决方案相同的结构，您可以通过使用 props optionRenderer 传递渲染函数来实现显示自定义选项元素。像这样:

class App extends Component {
  renderOption = option => (
    <div>
      <label>{option.label}</label>
      <label style={{ display: "block", color: "gray", fontSize: 12 }}>
        {option.subLabel}
      </label>
    </div>
  );
  render() {
    return (
      <div className="App">
        <Select options={options} optionRenderer={this.renderOption} />
      </div>
    );
  }
}

这里有 live example .