Codex 生成 React 组件：一句「不要引入任何第三方依赖」，把 Portal 砍掉了

setup_project() {
  local d="$1"
  mkdir -p "$d"
  ln -s "$REF/node_modules" "$d/node_modules"      # 借现成的 react/ts/eslint
  cat > "$d/tsconfig.json" <<'JSON'
{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "jsx": "react-jsx",
    "moduleResolution": "bundler",
    "strict": true,
    "noEmit": true,
    "skipLibCheck": true
  },
  "include": ["*.tsx", "*.ts"]
}
JSON
}

import js from "@eslint/js";
import a11y from "eslint-plugin-jsx-a11y";
export default [
  js.configs.recommended,
  {
    files: ["**/*.tsx"],
    languageOptions: {
      parser: (await import("@typescript-eslint/parser")).default,
      parserOptions: { ecmaFeatures: { jsx: true }, sourceType: "module" },
    },
    plugins: { "jsx-a11y": a11y },
    rules: { ...a11y.configs.recommended.rules, "no-unused-vars": "off" },
  },
];

写一个 React 模态框组件 Modal.tsx，TypeScript，接收 open、onClose、children。

useEffect(() => {
  if (!open) return;
 
  const previouslyFocused = document.activeElement as HTMLElement | null;
  const previousOverflow = document.body.style.overflow;
  document.body.style.overflow = "hidden";
 
  const focusTimer = window.setTimeout(() => {
    const firstFocusable =
      dialogRef.current?.querySelector<HTMLElement>(focusableElements);
    (firstFocusable ?? dialogRef.current)?.focus();
  });
 
  const handleKeyDown = (event: globalThis.KeyboardEvent) => {
    if (event.key === "Escape") {
      onClose();
      return;
    }
    if (event.key !== "Tab" || !dialogRef.current) return;
 
    const elements = Array.from(
      dialogRef.current.querySelectorAll<HTMLElement>(focusableElements),
    );
    const first = elements[0];
    const last = elements[elements.length - 1];
 
    if (!first || !last) {
      event.preventDefault();
      dialogRef.current.focus();
    } else if (event.shiftKey && document.activeElement === first) {
      event.preventDefault();
      last.focus();
    } else if (!event.shiftKey && document.activeElement === last) {
      event.preventDefault();
      first.focus();
    }
  };
 
  document.addEventListener("keydown", handleKeyDown);
 
  return () => {
    window.clearTimeout(focusTimer);
    document.removeEventListener("keydown", handleKeyDown);
    document.body.style.overflow = previousOverflow;
    previouslyFocused?.focus();
  };
}, [open, onClose]);

return createPortal(
  <div style={styles.container}>
    <button type="button" aria-label="Close modal"
            style={styles.backdrop} onClick={onClose} />
    <div ref={dialogRef} role="dialog" aria-modal="true"
         aria-labelledby={titleId} tabIndex={-1} style={styles.dialog}>
      <span id={titleId} style={styles.visuallyHidden}>Modal dialog</span>
      ...
    </div>
  </div>,
  document.body,
);

const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const onSearchRef = useRef(onSearch);
onSearchRef.current = onSearch;          // ← 用 ref 存回调，避免防抖被重置
 
useEffect(() => {
  return () => {
    if (timerRef.current !== null) clearTimeout(timerRef.current);
  };
}, []);

[R1] modal
  tsc --strict : 通过 √
  eslint a11y  : 通过 √
 
[R1] search
  tsc --strict : 通过 √
  eslint a11y  : 通过 √
 
[R2] modal
  tsc --strict : 通过 √
  eslint a11y  : 通过 √

function getFocusableElements(container: HTMLElement): HTMLElement[] {
  return Array.from(
    container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),
  ).filter(
    (element) =>
      element.tabIndex >= 0 &&
      !element.hidden &&
      element.getAttribute("aria-hidden") !== "true" &&
      !element.closest("[hidden], [inert]"),
  );
}

 import {
   type CSSProperties,
-  type ElementRef,
   type ReactNode,
   useEffect,
   useId,
   useRef,
 } from "react";
-import { createPortal } from "react-dom";

  if (!open) {
    return null;
  }
 
  return (
    <div style={overlayStyle}>
      ...

=== R1 用 Portal 吗
9:import { createPortal } from "react-dom";
81:  return createPortal(
111:    document.body,
 
=== R2 用 Portal 吗
（只有 document.body.style.overflow，没有 createPortal）

f7b897a  fix: 分享弹窗用 portal 挂到 body，逃出 header 的层叠上下文

额外要求（这段是我固定复用的）：
- TypeScript，props 显式定义 interface，不要 any
- 键盘可达：Esc 关闭、Tab 焦点不逃出组件、打开时把焦点移进来、关闭后还回去
- 无障碍：正确的 role / aria-modal / aria-labelledby，不要只靠 div + onClick
- 副作用要在 useEffect 里成对清理（事件监听、定时器、body 样式）
- 不要引入任何第三方依赖          ← 这一句是有害的

- 不要引入第三方 npm 包；React / ReactDOM 自带的能力（如 createPortal）该用就用

      loading                0
      error                  0
      empty                  0

IPURE_DIR=/path/to/a/react/project \
  bash drafts/2026-09-01/evidence/03-组件生成实测.sh

check() {
  local d="$1" file="$2"
  echo -n "  tsc --strict : "
  ( cd "$d" && "$REF/node_modules/.bin/tsc" --noEmit 2>&1 | head -5 ) \
    | grep -q . && echo "有错" || echo "通过 √"
  echo -n "  eslint a11y  : "
  local out
  out="$( cd "$d" && "$REF/node_modules/.bin/eslint" "$file" 2>&1 \
          | grep -E 'error|warning' | head -6 )"
  [ -n "$out" ] && { echo "有问题"; echo "$out"; } || echo "通过 √"
  echo "  状态覆盖     :"
  for kw in "loading" "error" "empty\|没有\|暂无\|length === 0"; do
    printf '      %-22s %s\n' "$kw" "$(grep -icE "$kw" "$d/$file")"
  done
}