自定义 MultiValueRemove 道具在反应中不起作用-select

Question

react-select 允许自定义其不同的组件，这很好，但由于某些原因我的自定义 MultiValueRemove（multi select 中的 x 图标）没有显示. Code here

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,
      }}
 />

Answer 1

来自 docs 的示例将道具传递给 component.MultiValueRemove，而不是 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>
  );
};

自定义 MultiValueRemove 道具在反应中不起作用-select

custom MultiValueRemove props does not work in react-select

reactjs

react-select

Live Demo