reactjs - 如何将 makeAnimated 与带有 react-select 的自定义组件一起使用？

Question

我有一个多选，我想在 react-select 中设置动画。我有几个自定义组件如下：

const ChecboxMultiSelectValueLabel = (props) => {
    const values = props.selectProps.value.filter(value => value.value != props.selectProps.allOption.value);
    const valueIndex = values.indexOf(props.data);
    if (values.length <= 4 || valueIndex < 3) {
        return (<div>{props.data.label}</div>);
    }
    if (valueIndex === 3) {
        return (<div className="bg-white">{values.length - 3} more...</div>);
    }
    return (<div className="hidden"></div>);
};

const ChecboxMultiSelectMultiValueRemove = props => {
    const values = props.selectProps.value;
    const valueIndex = values.indexOf(props.data);
    if (values.length <= 4 || valueIndex < 3) {
        return (<components.MultiValueRemove {...props} />);
    }
    return (<div className="hidden"></div>);
};

const ValueContainer = (props) => {
    const { children, selectProps: {allOption}, ...rest } = props
    const modChildren = [
        children[0].key === "placeholder" ? 
            children[0] : 
            children[0]
                .filter(child => child.props.data.value != allOption.value)
                .slice(0,5), children[1]]
    return (
        <components.ValueContainer allOption={allOption} {...rest}>
            {modChildren}
        </components.ValueContainer>
    );
};

我已经添加了所有的组件：

        components: { 
            MultiValueLabel: ChecboxMultiSelectValueLabel,
            MultiValueRemove: ChecboxMultiSelectMultiValueRemove,
            ValueContainer: ValueContainer,
            animatedComponents
        },

由于某种原因，动画将无法正常工作。其他一切都按预期工作。

标签： reactjsreact-select