Question

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

我已经查看了https://react-select.com/components上的每个组件，但不确定哪个组件最适合我的需求。

通过查看组件列表，我相信option组件是用于类似的事情，可能会起作用，但我不确定。有人可以验证我的想法吗？

Answer 1

反应选择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。

反应选择V1解决方案：

与V2解决方案保持相同的结构，您可以通过使用道具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。

如何使用react-select来自定义每个下拉项下方的呈现子文本？

1 个答案: