我想使用useEffect
在React.createPortal
之后采取行动。它在Mac上运行良好,但在某些Windows设备上不起作用。它们在chrome浏览器中运行。在窗口设备中,document.querySelector('.cartoon-bull')
不确定吗?我该怎么办?
useEffect(() => {
const rewriteBounce = () => {
const { offsetParent } = props;
const { width, height } = document.querySelector(offsetParent).getClientRects()[0];
const { width: bull_width, height: bull_height } = document.querySelector('.cartoon-bull').getClientRects()[0];
const bounce_left = bull_width - width;
const bounce_top = bull_height - height;
const bounce_right = 0;
const bounce_bottom = bull_height / 2;
setBounds({ left: bounce_left, right: bounce_right, top: bounce_top, bottom: bounce_bottom });
};
rewriteBounce();
window.addEventListener('resize', rewriteBounce);
return () => {
window.removeEventListener('resize', rewriteBounce);
};
}, []);
return ReactDOM.createPortal(
<Draggable
position={{ ...cartoonBullPos }}
onStop={handleStop}
handle=".cartoon-bull"
bounds={bounds}
disabled={!closeState}
>
<div className="cartoon-bull-content">
<div
className={className(
'cartoon-bubbles',
{ 'cartoon-bubbles-theme-two': bullThemeTwoEnable },
{ 'cartoon-bubbles-theme-one': firstBullEnable }
)}
>
<div className="cartoon-bubbles-content">{bubbleTip}</div>
</div>
<div
className="cartoon-bull"
style={{
backgroundImage: closeState ? `url(${props.bullImg || ''})` : `url(${STATIC_BULL})`,
backgroundSize: closeState ? 'contain' : '150px',
cursor: closeState ? 'move' : 'pointer',
}}
onClick={closeState ? () => {} : showCartoonBull}
>
{!!props.bullImg && (
<span
className={className('cartoon-bull-close', { 'cartoon-bull-close-show': closeState })}
onClick={hideCartoonBull}
/>
)}
</div>
</div>
</Draggable>,
document.body
);