如何在react-select中实现多个自定义组件？isMulti模式自定义chip遇问题

问题核心原因 #

你遇到的自定义MultiValue和MultiValueRemove不生效，核心是两个细节遗漏：

• 自定义MultiValue未渲染移除按钮：你实现的MultiValue组件只显示了选项标签，但没把props.children（即MultiValueRemove组件）渲染进去，导致自定义移除按钮无法显示，原移除逻辑也失效。
• MultiValueRemove组件写法错误：直接嵌套components.MultiValueRemove会造成组件层级混乱，应该基于props提供的事件和属性直接实现自定义移除按钮。

修正后的代码示例 #

import React from "react";
import EmojiIcon from "@atlaskit/icon/glyph/emoji";
import Select, { components, MultiValueProps, MultiValueRemoveProps } from "react-select";
import { ColourOption, colourOptions } from "./docs/data";

// 自定义移除按钮组件
const MultiValueRemove = (props: MultiValueRemoveProps<ColourOption>) => {
  // 复用props的点击事件，自定义图标样式
  return (
    <div 
      onClick={props.onClick} 
      style={{
        marginLeft: "8px",
        cursor: "pointer",
        color: colourOptions[2].color
      }}
    >
      <EmojiIcon label="移除选项" primaryColor={colourOptions[2].color} />
    </div>
  );
};

// 自定义Chip组件，必须渲染props.children（即移除按钮）
const MultiValue = (props: MultiValueProps<ColourOption>) => {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        backgroundColor: "#f0f0f0",
        borderRadius: "20px",
        padding: "5px 10px",
        marginRight: "5px",
        marginBottom: "4px",
      }}
    >
      <p style={{ margin: 0, fontSize: "14px" }}>{props.data.label}</p>
      {/* 必须渲染children才能显示自定义移除按钮 */}
      {props.children}
    </div>
  );
};

export default () => (
  <Select
    closeMenuOnSelect={false}
    components={{
      MultiValue,
      MultiValueRemove,
    }}
    defaultValue={[colourOptions[4], colourOptions[5]]}
    isMulti
    options={colourOptions}
  />
);

额外说明 #

• 若想保留react-select原有MultiValue的样式结构，可通过components.MultiValue扩展而非完全重写：

  const MultiValue = (props: MultiValueProps<ColourOption>) => {
    return (
      <components.MultiValue {...props}>
        <components.MultiValueLabel {...props}>
          {props.data.label}
        </components.MultiValueLabel>
        {props.children}
      </components.MultiValue>
    );
  };
  

• 代码示例2能生效，是因为它仅替换MultiValue内容且未破坏组件层级，而你的代码完全重写MultiValue却未预留移除按钮的位置。

内容的提问来源于stack exchange，提问作者Sriram Prasanth