
从“react”导入 React, { useState, useRef, useEffect };
从“react-dom”导入ReactDOM;
const PortalWrapper = React.forwardRef(({ 孩子 }, ref) => {
const [openDropdownMenu, setOpenDropdownMenu] = useState(false);
const [位置,setPosition] = useState({
左:0,
顶部:0,
宽度:“100%”,
});
const dropdownRef = useRef(null);
const handleDropdDownClick = () => {
setOpenDropdownMenu(!openDropdownMenu);
if (ref && ref && ref.current 中的“当前”) {
const { 顶部、左侧、高度 } = ref.current.getBoundingClientRect();
设置位置({
顶部:顶部+高度,
左边,
宽度:`${ref.current.clientWidth}px`,
});
}
};
使用效果(()=> {
if (openDropdownMenu && dropdownRef.current) {
dropdownRef.current.style.top = `${position.top}px`;
dropdownRef.current.style.left = `${position.left}px`;
dropdownRef.current.style.display = "无";
}
}, [打开下拉菜单,位置]);
返回 (
{孩子(位置)}
{打开下拉菜单&&
ReactDOM.createPortal(
{孩子(位置)}
,
文档正文
)}
);
});
导出默认的PortalWrapper;
{()=>
(itIsOwner(用户?.agent_role) ||
用户?.platform_owner) && (
<选择
样式={自定义样式}
onChange={(selectedOption) =>
处理操作更改(
选定的选项,
联系方式,
指数
)
}
选项={agentData?.map((选项)=>({
值:选项,
标签:`${option.first_name}`,
}))}
占位符=“埃丝特·霍华德”
类名={clsx(
“dropdown_list !w-40 光标指针 userFilter mt-[0.4375rem]”
)}
classNamePrefix =“dropdown_list-联系人”
菜单位置=“固定”
菜单放置=“自动”
menuShouldScrollIntoView={false}
menuPortalTarget={document.body}
/>
)
}
门户包装>