Javascript 如何更改react select的ValueContainer以使缩小不会引入奇怪的行为？

我用ValueContainer修改了一个multi-react select组件，这样，如果选择了多个选项，则只会显示一个选项，括号中是额外选择的选项数。代码如下所示：

        ValueContainer = ({ children, getValue, ...props }) => {
            let values = getValue();
            let valueLabel = "";

            if (values.length > 0) valueLabel += props.selectProps.getOptionLabel(values[0]);
            if (values.length > 1) valueLabel += ` (${values.length})`;

            // Keep standard placeholder and input from react-select
            let childrenToRender = React.Children.toArray(children).filter((child) => ['Input', 'DummyInput', 'Placeholder'].indexOf(child.type.name) >= 0);

            return (
            <components.ValueContainer {...props}>
                {!props.selectProps.inputValue && valueLabel }
                { childrenToRender }
            </components.ValueContainer>
            );
        };


        customStyles = {
            valueContainer: (provided, state) => ({
              ...provided,
              textOverflow: "ellipsis",
              //maxWidth: "90%",
              //whiteSpace: "nowrap",
              overflow: "hidden",
              display: "initial"
            })
        };

//inside render()
            const employeeFilter = (
                                    <div className="multi-select col-6 col-md-3 filter-element btn">
                                        <span className="filter-label">Filter by employee(s)</span>
                                        <Select
                                            options={this.props.employeeProps.employeeData}
                                            onChange={this.handleEmployeeChange}
                                            value={selectedEmployee}
                                            isMulti={true}
                                            inputId='clickableInput'
                                            components={{
                                                ValueContainer
                                            }}
                                            closeMenuOnSelect={false}
                                            hideSelectedOptions={false}
                                            styles={customStyles}
                                            isSearchable={false}
                                        />
                                    </div>
            );

ValueContainer=（{children，getValue，…props}）=>{
让value=getValue（）；
让valueLabel=“”；
如果（values.length>0）valueLabel+=props.selectProps.getOptionLabel（值[0]）；
如果（values.length>1）valueLabel+=`（${values.length}）`；
//保留标准占位符和react select中的输入
让childrenToRender=React.Children.toArray（Children）.filter（（child）=>['Input'，'DummyInput'，'Placeholder'].indexOf（child.type.name）>=0）；
返回(
{！props.selectProps.inputValue&&valueLabel}
{childrenToRender}
);
};
自定义样式={
valueContainer：（已提供，状态）=>({
假如
textOverflow：“省略号”，
//最大宽度：“90%”，
//空白：“nowrap”，
溢出：“隐藏”，
显示：“首字母”
})
};
//内部渲染（）
const employeeFilter=(
按员工筛选
);

ValueContainer和customStyles是在React组件之前定义的，它在我的开发机器上运行良好。但是，在生产过程中，它不能正常工作：

• 单击下拉列表外部不会关闭它（与在开发人员计算机上一样）
• 占位符文本几乎不可见（该区域的高度很小）

原因似乎是缩小过程。我正在网页包中使用TerserPlugin。使用UglifyJS不是一个选项，因为我正在编写ES6代码（这里的建议：）

我尝试了这个线程中的所有内容，但都无法使其工作。可能是我不了解react select中的组件系统是如何工作的（我从一个示例中获取了代码）

---

谢谢你的帮助

你弄明白了吗？