自定义MUI Dialog组件内textarea的React useRef返回null求助

你遇到的问题是自定义Dialog组件内部的textarea无法通过useRef获取DOM引用，根源有两个：

1. 直接将子元素放在MUI的Dialog组件下，不符合MUI Dialog的正确嵌套结构，导致子元素挂载逻辑异常
2. 使用了MUI动态生成的硬编码类名，虽不直接影响ref，但属于不良实践，易引发样式失效问题

步骤1：修复Dialog嵌套结构 #

MUI的Dialog组件要求子元素放在DialogContent（或DialogTitle、DialogActions）容器中，否则可能导致渲染异常。先导入DialogContent组件，再重构自定义Dialog：

import MuiDialog from "@mui/material/Dialog";
import DialogContent from "@mui/material/DialogContent"; // 新增导入
import { styled } from "@mui/material/styles";

// 重构styled样式，移除硬编码类名
const TheDialog = styled(MuiDialog)(({ theme }) => ({
  '& .MuiPaper-root': {
    background: "linear-gradient(90deg, rgb(142, 31, 195) 0%, rgb(6, 111, 197) 100%)",
    color: "white",
    '& *': {
      color: "white",
    },
    '& button': {
      alignItems: "center",
      background: "#FFFFFF",
      border: "1px solid rgba(0, 0, 0, 0.1)",
      borderRadius: ".25rem",
      boxShadow: "rgba(0, 0, 0, 0.02) 0 1px 3px 0",
      boxSizing: "border-box",
      color: "rgba(0, 0, 0, 0.85)",
      cursor: "pointer",
      fontFamily: "system-ui,-apple-system,system-ui,Helvetica Neue,Helvetica,Arial,sans-serif",
      fontSize: "13px",
      fontWeight: "600",
      textDecoration: "none",
      transition: "all 250ms",
      userSelect: "none",
      WebkitUserSelect: "none",
      touchAction: "manipulation",
    },
    '& button:hover': {
      transform: "translateY(-1px)"
    },
    '& button:focus': {
      borderColor: "rgba(0, 0, 0, 0.15)",
      boxShadow: "rgba(0, 0, 0, 0.1) 0 4px 12px",
      color: "rgba(0, 0, 0, 0.65)"
    },
    '& button:active': {
      backgroundColor: "#F0F0F1",
      borderColor: "rgba(0, 0, 0, 0.15)",
      boxShadow: "rgba(0, 0, 0, 0.06) 0 2px 4px",
      color: "rgba(0, 0, 0, 0.65)",
      transform: "translateY(0)"
    },
  },
}));

// 修改自定义Dialog组件，加入DialogContent容器
function Dialog({handleClose, open, children}){
  return(
    <TheDialog
      onClose={handleClose}
      fullWidth={true}
      maxWidth={"sm"}
      open={open}
    >
      <DialogContent>
        {children}
      </DialogContent>
    </TheDialog>
  )
}

步骤2：验证ref功能 #

修改后，App组件中的textAreaRef即可正常获取DOM元素：

function App() {
  const textAreaRef = React.useRef(null);

  const handleClick = () => {
    console.log(textAreaRef.current?.value); // 添加?.避免空值报错
  };

  return (
    <div className="App">
      <Dialog
        open={true}
        handleClose={()=>{}}
      >
        <textarea ref={textAreaRef} rows="3" placeholder="Enter text here" />
        <button onClick={handleClick}>Click me</button>
      </Dialog>
    </div>
  );
}

额外优化 #

你在App的Dialog组件中重复写了两次title="My Dialog"，可删除其中一个，避免无效prop警告。

内容的提问来源于stack exchange，提问作者LIOR AVIV