useEffect在React中的react.createPortal之前行动吗?

时间:2019-04-19 12:47:19

标签: reactjs

我想使用useEffectReact.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
  );

0 个答案:

没有答案