React-Select - 替换自定义选项内容的组件 [英] React-Select - Replacing Components for custom option content

问题描述

使用 React-Select(版本 2)我想要自定义设计的(选择)选项.

文档表明 替换组件 将是我可以用来实现的方法这个.

很遗憾，我找不到显示此功能实现的示例.

是否有人可以向我展示此功能的用法，您将拥有一个简单的自定义选项(可能还有一个标签和值，每个选项标签左侧还包含一个 SVG 图形).

非常感谢

解决方案

对于大多数用例，您可能不需要替换完整的 Option 组件.如果您希望保持与 Option 相同的整体结构和外观，但希望显示多个文本块、图像或对每个选项的正文进行一些其他特殊处理，则有一个更简单的方法方式.

那就是使用 formatOptionLabel 渲染道具.

从react"导入React；从react-dom"导入 ReactDOM；导入从反应选择"中选择；常量选项 = [{ value: "Abe", label: "Abe", customAbbreviation: "A" },{ value: "John", label: "John", customAbbreviation: "J" },{ value: "Dustin", label: "Dustin", customAbbreviation: "D" }];const formatOptionLabel = ({ value, label, customAbbreviation }) =>(<div style={{ display: "flex" }}><div>{标签}</div><div style={{ marginLeft: "10px", color: "#ccc" }}>{自定义缩写}

);const CustomControl = () =>(<选择默认值={选项[0]}formatOptionLabel={formatOptionLabel}选项={选项}/>);ReactDOM.render(, document.getElementById("root"));

https://codesandbox.io/embed/reactselect-formatoptionlabel-bde1q

https://react-select.com/props - 搜索 formatOptionLabel

Using React-Select (version 2) I would like to have custom designed (select) options.

The documentation suggests that Replacing Components would be a method that I could use to achieve this.

Unfortunately I'm unable to find examples that show implementations of this feature.

Is there anyone that could present to me usage of this feature whereby you would have a simple custom option (perhaps a label and value that also includes an SVG graphic to the left of each option label).

Many thanks in advance

解决方案

For a majority of use cases, you probably don't need to replace the full Option component. If you're looking to stay with the same overall structure and look and feel of the Option, but you want to display several blocks of text, or an image, or some other special treatment to the body of each option, there is an easier way.

That's to use the formatOptionLabel render prop.

import React from "react";
import ReactDOM from "react-dom";
import Select from "react-select";

const options = [
  { value: "Abe", label: "Abe", customAbbreviation: "A" },
  { value: "John", label: "John", customAbbreviation: "J" },
  { value: "Dustin", label: "Dustin", customAbbreviation: "D" }
];

const formatOptionLabel = ({ value, label, customAbbreviation }) => (
  <div style={{ display: "flex" }}>
    <div>{label}</div>
    <div style={{ marginLeft: "10px", color: "#ccc" }}>
      {customAbbreviation}
    </div>
  </div>
);

const CustomControl = () => (
  <Select
    defaultValue={options[0]}
    formatOptionLabel={formatOptionLabel}
    options={options}
  />
);

ReactDOM.render(<CustomControl />, document.getElementById("root"));

https://codesandbox.io/embed/reactselect-formatoptionlabel-bde1q

https://react-select.com/props - search for formatOptionLabel

这篇关于React-Select - 替换自定义选项内容的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！