react-select: 是否可以同时添加动画组件和自定义组件？

Question

我想知道是否可以在 Select 组件内的 components 道具中同时添加动画组件和自定义组件。不幸的是，在 react-select 文档中找不到任何内容。

对于“动画组件”，我指的是这些：https://react-select.com/home#animated-components。

“自定义组件”是这些：https://react-select.com/components#replaceable-components

在我的例子中，自定义组件是这个：

// Custom component
const CustomMultiValue = (
    props: MultiValueProps<FilterOptions, GroupTypeBase<FilterOptions>>
  ) => (
    <components.MultiValue {...props}>{props.data.label}</components.MultiValue>
  );

// Animated components
  const animatedComponents = makeAnimated();

Select 看起来像这样：

<Select
      isMulti
      onChange={(value) => handleChange(value)}
      styles={customSelectStyles}
      components={{ MultiValue: CustomMultiValue }}
      theme={customSelectTheme}
      closeMenuOnSelect={false}
      placeholder={placeholder}
/>

我尝试了很多方法来添加动画组件，但似乎没有任何效果。例如：

components={animatedComponents, { MultiValue: CustomMultiValue }}

components={{ MultiValue: CustomMultiValue, Control: animatedComponents }}

有人知道吗？谢谢！

Answer 1

我假设您想要的是自定义 MultiValue 组件以使其具有动画效果。

您可以在动画组件的文档中看到，makeAnimated 方法为作为参数传递的组件创建包装器并且：

If no arguments are passed, built-in components are wrapped instead.

在您的代码中，这是将要设置动画的内置多值组件

如果这是您想要的，您必须将自定义多值作为参数传递给 makeAnimated，并在 Select[=17 的 components 道具中使用 animatedComponents =]

// Animated components
  const animatedComponents = makeAnimated({ MultiValue: CustomMultiValue });

...

<Select
      isMulti
      components={animatedComponents}
      ...
/>

您可以在这个代码沙箱中尝试，其中多值被动画化并被自定义以显示自定义标签

https://codesandbox.io/s/clever-payne-ehi8t?file=/src/App.tsx

react-select: 是否可以同时添加动画组件和自定义组件？

react-select: Is it possible to add animated components and custom components simultaneously?

reactjs

react-select