Question

使用React-Select（版本2）我想拥有定制设计的（选择）选项。

文档表明Replacing Components是我可以用来实现这一目标的方法。

很遗憾，我无法找到显示此功能实现的示例。

有没有人可以向我介绍此功能的用法，因此您将有一个简单的自定义选项（也许标签和值在每个选项标签的左侧还包括SVG图形）。

非常感谢

Answer 1

您可以通过在组件属性中包含替代来替换任何组件。

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[People](
    [Id] [int] NOT NULL,
    [ParentId] [int] NULL,
    [NodeId] [hierarchyid] NOT NULL,
    [_ParentNodeId]  AS ([NodeId].[GetAncestor]((1))) PERSISTED,
 CONSTRAINT [PK_People] PRIMARY KEY CLUSTERED 
(
    [Id] ASC,
    [NodeId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
INSERT [dbo].[People] ([Id], [ParentId], [NodeId]) VALUES (1, NULL, N'/')
GO
INSERT [dbo].[People] ([Id], [ParentId], [NodeId]) VALUES (2, 1, N'/2/')
GO
INSERT [dbo].[People] ([Id], [ParentId], [NodeId]) VALUES (3, 1, N'/3/')
GO
INSERT [dbo].[People] ([Id], [ParentId], [NodeId]) VALUES (4, 2, N'/2/1/')
GO
INSERT [dbo].[People] ([Id], [ParentId], [NodeId]) VALUES (5, 4, N'/2/1/1.1/')
GO
ALTER TABLE [dbo].[People]  WITH CHECK ADD  CONSTRAINT [FK_People_Parent] FOREIGN KEY([ParentId], [_ParentNodeId])
REFERENCES [dbo].[People] ([Id], [NodeId])
GO
ALTER TABLE [dbo].[People] CHECK CONSTRAINT [FK_People_Parent]
GO

Update People set NodeId = N'/2/1/2/' where Id = 5--Works


Update People set NodeId = N'/2/2/' where Id = 4 --Error

类似的东西：

<Select components={{Option: MyOption}} />

const Option = props => { const { innerProps, innerRef } = props; return ( <article ref={innerRef} {...innerProps} className="custom-option"> <h4>{props.data.artist}</h4> <div className="sub">{props.data.title} </div> </article> ); }; <Select components={{Option}} />和innerRef属性非常重要，因为它们继承了Option需要的诸如悬停和onClick之类的东西。道具中的innerProps是您的选择数据所在的位置。

Answer 2

对于大多数用例，您可能不需要替换完整的Option组件。如果您希望保持与Option相同的总体结构和外观，但又希望在每个Option的主体上显示几个文本块，一个图像或其他特殊处理，则更容易方式。

那就是使用formatOptionLabel渲染道具。

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-搜索formatOptionLabel

Answer 3

通常，您确实想use formatOptionLabel prop（不需要额外的内容）。但是如果您不这样做，则可以通过以下方式覆盖Option组件：

import Select, { components } from 'react-select';

const CustomOption = ({ children, ...props }) => {
  return (
    <components.Option {...props}>
      <img src={...} />
      {children}
    </components.Option>
  );
};

function App() {
  return (
    <Select components={{Option: CustomOption}} ... />
  );
}

在这里，我重新使用了库存组件（components.Option）。这样，我就不必关心innerRef之类的东西。

https://codesandbox.io/s/react-select-item-icon-2z3tb

React-Select-替换自定义选项内容的组件

3 个答案: