material-ui v4.0.1 предупреждение "Ожидается элемент, который может содержать ссылку" - PullRequest
Новая
       17

material-ui v4.0.1 предупреждение "Ожидается элемент, который может содержать ссылку"

4 голосов
/ 28 мая 2019

Я обновился до material-ui v4.0.1 и вижу, что модалы теперь требуют переадресованный реф. У меня возникли проблемы с реализацией исправления для этого с использованием компонентов класса и диалогов.

Я пытался использовать React.createRef(), а также React.forwardRef((props, ref) => (...) в нескольких местах, но я не могу понять, как разрешить это предупреждение.

В моем родительском компоненте я отображаю пользовательский компонент 

<ApolloFormDialog />

В ApolloFormDialog Я отрисовываю по существу: 

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

Полное предупреждение: Warning: Failed prop type: Invalid prop 'children' supplied to 'Modal'. Expected an element that can hold a ref. Did you accidentally use a plain function component for an element instead?

Однако в настоящее время я использую компоненты класса. Миграция для использования компонентов функций сейчас не вариант, так как мое приложение довольно большое.

Я попытался добавить ссылку к ApolloFormDialog как 

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

а также упаковка ApolloFormDialog класса с: 

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

и добавление этого ref в диалог как 

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

но предупреждение все еще сохраняется, и я не уверен, куда идти отсюда.

1 Ответ

9 голосов
/ 28 мая 2019

Моя проблема на самом деле не имела отношения к Dialog, но с пропеллером TransitionComponent на Dialog.

Я переключаюсь между двумя типами переходов в моем ApolloFormDialog в зависимости от того,экран находится ниже определенной точки останова, которая вызывается как компоненты функции: 

<Dialog
  open={open}
  onClose={onRequestClose}
  classes={{
    paper: classnames(classes.dialogWidth, classes.overflowVisible),
  }}
  fullScreen={fullScreen}
  TransitionComponent={
    fullScreen ? FullscreenTransition : DefaultTransition
  }
>
  {content}
</Dialog>

FullscreenTransition и DefaultTransition происходят из файла и определяются следующим образом: 

import React from 'react'
import Fade from '@material-ui/core/Fade'
import Slide from '@material-ui/core/Slide'

export function DefaultTransition(props) {
  return <Fade {...props} />
}

export function FullscreenTransition(props) {
  return <Slide direction='left' {...props} />
}

export function FullscreenExpansion(props) {
  return <Slide direction='right' {...props} />
}

Изменение этих функций на следующее исправило мою проблему: 

import React from 'react'
import Fade from '@material-ui/core/Fade'
import Slide from '@material-ui/core/Slide'

export const DefaultTransition = React.forwardRef((props, ref) => (
  <Fade {...props} ref={ref} />
))

export const FullscreenTransition = React.forwardRef((props, ref) => (
  <Slide direction='left' {...props} ref={ref} />
))

export const FullscreenExpansion = React.forwardRef((props, ref) => (
  <Slide direction='right' {...props} ref={ref} />
))

С моей стороны решить эту проблему было относительно сложно, поэтому я оставлю этот вопрос на всякий случай, если кто-то ещесталкивается с подобной проблемой где-то в будущем.

...