为模态框添加点击外部关闭功能触发多条警告

关于 Context.Consumer.Provider 警告 #

你没直接使用Context，但这个警告的触发原因基本可以锁定在两个方向：

1. 父组件传参问题：调用Modal时传入的props里混入了Context相关的对象（比如误把某个Context的Provider/Consumer组件当成属性传进来）。
2. 间接触发的内部错误：项目里的第三方依赖（比如UI库、样式工具）在处理鼠标事件时误用了Context API；或者当前React版本存在事件+Portal组合的兼容性bug。

排查步骤：

• 临时移除代码里的{...props}，如果警告消失，就逐个排查父组件传入的props项，找到混入的异常属性。
• 升级React到稳定版本，排除版本bug影响。

关于 ref 不是div的prop警告 #

这个问题的根源很清晰：你给Modal内层的div同时设置了ref={modalRef}和{...props}，如果父组件调用Modal时传入了ref属性，React会把这个ref当作普通prop传递给DOM元素，但DOM元素不接受ref作为常规prop，因此触发警告。

修复代码：

export default function Modal({ 
  children, 
  isVisible, 
  hide, 
  ref: externalRef, // 单独解构外部ref，不混入props
  className, 
  allowClose,
  ...props 
}) {
  const modalRef = useRef(null);

  // 如果需要把内部ref暴露给父组件，用useImperativeHandle
  useImperativeHandle(externalRef, () => modalRef.current);

  useEffect(() => {
    if (isVisible) {
      modalRef.current?.focus();
    }
    document.body.classList.toggle('noOverflow', isVisible);
  }, [isVisible]);

  const handleMouseUp = (event) => {
    console.log(event.target, modalRef.current);
  };

  // 注意：确保handleKeyDown函数已定义，否则移除该属性
  return (
    isVisible &&
    createPortal(
      <>
        <div
          className={styles.backdrop}
          onClick={hide}
        ></div>

        <div
          className={styles.modal}
          tabIndex={-1}
          ref={modalRef}
          // onKeyDown={handleKeyDown}
          onMouseUp={handleMouseUp}
          {...props} // 这里不再包含ref、className等已解构的属性
        >
          <div className={`${styles.content} ${className}`}>
            <div className={styles.header}>
              {allowClose && (
                <Icon
                  name="close-o"
                  onClick={hide}
                />
              )}
            </div>

            <div className={styles.body}>{children}</div>
          </div>
        </div>
      </>,
      document.body,
    )
  );
}

额外提示 #

你在StackBlitz里复现不了问题，说明异常是项目环境或父组件传参导致的：

• 检查父组件调用Modal的代码，确认没有传入组件实例、Context对象这类非常规props。
• 注释掉handleMouseUp里的console.log，排除极端情况下的日志输出触发异常。

内容的提问来源于stack exchange，提问作者Alejandro Bar