时间戳

首页 > 解决方案 > 自定义 MultiValueRemove 道具在反应选择中不起作用

reactjs - 自定义 MultiValueRemove 道具在反应选择中不起作用

问题描述

在此处输入图像描述

react-select 允许自定义其不同的组件，这很好，但由于某种原因，我的自定义MultiValueRemove（多选中的 x 图标）没有显示。代码在这里

const MultiValueRemove = ({
    innerProps,
  }:MultiValueProps<NormalizedDropdown>) => (
    <components.MultiValueRemove {...innerProps}>
      <IconContainer>
        <Icon name="close" size={12} color="white" />
      </IconContainer>
    </components.MultiValueRemove>
  );

X 图标不显示。这就是我使用它的方式...

<CreatableSelect
      options={options}
      components={{
        MultiValueRemove,
      }}
 />

标签： reactjsreact-select

解决方案

文档中的示例将道具传递给component.MultiValueRemove, not innerProps。然后MultiValueRemove使用props.innerProps并将其传递给子组件，您可以通过将innerProps直接传递给其中的div元素来确认它：

const MultiValueRemove = (props: MultiValueRemoveProps<ColourOption>) => {
  return (
    <Tooltip content={'Customise your multi-value remove component!'} truncate>
      <components.MultiValueRemove {...props}>
        <EmojiIcon label="Emoji" primaryColor={colourOptions[2].color} />
      </components.MultiValueRemove>
    </Tooltip>
  );
};

现场演示

推荐阅读