Question

我正在尝试使用Material UI显示警报。我已经使用forwardRef制作了一个组件，好像不使用它也会在渲染时抛出findDOMnode错误。

const AnnualMileageAlert = forwardRef( ( props, ref ) => {
  const classes = useStyles();
  const [open, setOpen] = useState( true );

  return (
    <div {...props} ref={ref} className={classes.root}>
      <Collapse in={open}>
        <Alert
          action={(
            <IconButton
              aria-label="close"
              color="inherit"
              size="small"
              onClick={() => {
                setOpen( false );
              }}
            >
              <CloseIcon fontSize="inherit" />
            </IconButton>
          )}
          variant="filled"
          severity="warning"
        >
          <strong>1000000</strong>
        </Alert>
      </Collapse>
    </div>
  )
} );


export default AnnualMileageAlert;

这将在另一个文件中呈现，如下所示：

const reference = createRef();

return (
    <form className={classes.root} noValidate autoComplete="off">
      <div className="alert">{data > 100 ? <AnnualMileageAlert ref={reference}/> : null}</div>

      ...
    </form>
  );

当我单击图标以关闭警报时，控制台中将显示警告：

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference.

我认为通过使用forwardRef并传递引用应该可以，但是由于某种原因，它在关闭警报时会发出警告。

使用者介面

0 个答案: