reactjs - 迁移到 material-ui v4，我收到 Modal 组件的警告

Question

自升级 material-ui至 v4 ，我收到了一些关于 Modal 组件的警告。

例如

Failed prop type: Invalid prop children supplied to ForwardRef(Modal) .

Function components cannot be given refs.

这是模态代码(警告 1):

import React from 'react';
import Proptypes from 'prop-types';
...

class DetailDialog extends React.Component {
  render() {
    const { classes, open, onClose } = this.props;

    return (
      <Dialog
        open={open}
      >
        ...
      </Dialog>
    );
  }
}

DetailDialog.propTypes = {
  open: Proptypes.bool,
  onClose: Proptypes.func,
};

export default DetailDialog;

这是模态代码(警告 2):

import React from 'react';
import PropTypes from 'prop-types';
...

class SelectCatDialog extends React.Component {
  render() {
    const { open, list, onClose } = this.props;

    return (
      <Dialog
        open={open}
        onClose={onClose}
      >
        ...
      </Dialog>
    )
  }
}

SelectCatDialog.propTypes = {
  open: PropTypes.bool,
  onClose: PropTypes.func,
}

SelectCatDialog.defaultProps = {
  list: [],
}

export default SelectCatDialog;

这是调用模态页面代码:

import React from 'react';
import DetailDialog from './components/DetailDialog';
import SelectProcDialog from './components/SelectProcDialog';

class Index extends React.Component {
  render() {
    return (
      ...
        <DetailDialog
          open={this.state.detailDialog}
          entity={this.state.currentDetail}
          onClose={this.handleDetailClose.bind(this)}
        />

        <SelectProcDialog
          open={this.state.catalogDialog}
          list={this.props.catalog}
          onOk={(value) => this.handleSelectCatalogOk(value)}
          onClose={() => this.setState({ catalogDialog: false })}
        />
      ...
    )
  }
}

export default Index;

发生了什么？在 v3 版本中工作正常。有人可以回答吗？

Answer 1

从 V4 开始，Dialog 和 Modal 子代必须能够持有 ref。
以下内容可以包含 ref:

• Any Material-UI component
• class components i.e. React.Component or React.PureComponent
• DOM (or host) components e.g. div or button
• React.forwardRef components
• React.lazy components
• React.memo components

该错误声明您将函数组件作为模态的子组件提供。
要修复错误，请将函数组件更改为可以保存引用的内容(例如类组件)。