reactjs - Material-ui v4.0.1 警告 "Expected an element that can hold a ref"

Question

我升级到了material-ui v4.0.1，我发现模态框现在需要转发的引用。我在使用类组件和对话框实现此修复时遇到一些问题。

我尝试在一些地方使用 React.createRef() 以及 React.forwardRef((props, ref) => (...) 但我无法弄清楚如何解决此警告。

在我的父组件中，我渲染了一个自定义组件

<ApolloFormDialog />

在 ApolloFormDialog 中，我基本上渲染:

<Dialog ...>
  {title}
  {subtitle}
  {form}
</Dialog>

<小时/>

完整的警告是警告:失败的 Prop 类型:提供给“Modal”的 Prop “children”无效。需要一个可以保存引用的元素。您是否不小心为元素使用了普通函数组件？

但是我目前正在使用类组件。由于我的应用程序相当大，因此目前无法迁移到使用功能组件。

<小时/>

我尝试将引用添加到 ApolloFormDialog 作为

<ApolloFormDialog ref={React.createRef()} />

以及用以下内容包装 ApolloFormDialog 的类:

export default React.forwardRef((props, ref) => <ApolloFormDialog ref={ref} {...props}/>)

然后将该ref添加到对话框中

<Dialog ref={this.props.ref} />

但警告仍然存在，我不知道从这里去哪里。

Answer 1

我在“@material-ui/core/Tooltip”包装新功能组件时遇到了同样的问题。即使该组件被包装在其自己的代码内的 div 中。

<!-- "Did you accidentally use a plain function component for an element instead?" -->

<Tooltip>
  <NewFunctionalComponent />
</Tooltip>

<!-- Wrapped in a new div, devtools won't complain anymore -->

<Tooltip>
  <div>
    <NewFunctionalComponent />
  </div>
</Tooltip>

<!-- No more warnings! -->