Блог

Главная - Вопросы по программированию - Как мне передать компонент в диалоговом окне (material-ui), используя React?

Как мне передать компонент в диалоговом окне (material-ui), используя React?

#javascript #reactjs #dialog #modal-dialog #material-ui

#javascript #reactjs #диалог #модальный диалог #material-ui

Вопрос:

Привет, я пытаюсь отобразить компонент диаграммы внутри диалогового окна. Я в замешательстве, почему диаграмма не отображается внутри диалогового окна. Это много кода, поэтому я не могу создать изолированную среду, но изо всех сил пытаюсь найти какую-либо документацию, чтобы увидеть, как на компонент следует ссылаться внутри диалогового окна, поэтому просто сужаю проблему. Для получения дополнительной информации, если интересно, на странице отображается та же диаграмма, когда я нажимаю кнопку, которая открывает диалоговое окно, но я бы хотел, чтобы диаграмма также отображалась в диалоговом окне. Компонент называется ResultCharts. Он импортируется / экспортируется правильно. Я довольно новичок в React. Спасибо!

 <Dialog open={this.state.openResult} onClose={this.handleClose} aria-labelledby="form-dialog-title">
     <DialogTitle onClose={this.handleClose} id="form-dialog-title">Results</DialogTitle>
     <DialogContent>                        
             <ResultCharts
                  results={ results }
             />
     </DialogContent>
     <DialogActions>
          <Button onClick={this.handleClose} color="primary">
               Cancel
          </Button>
     </DialogActions>
</Dialog>

Отредактировано для добавления: Для справки, это код кнопки, которая открывает диалоговое окно. Метод в onClick выполняет алгоритм отображения результатов диаграммы (который выполняется правильно на странице, просто не удается отобразить диаграмму внутри диалогового окна). Еще раз большое спасибо!

 <Button variant="contained" className={classes.button} onClick={this.showResults}>
    Click me!
</Button>

Ответ №1:

Трудно сказать точно, но я бы попробовал несколько вещей:

  1. Проверьте страницу и наведите курсор на диалоговое окно, чтобы увидеть, есть ли div для диаграммы.
  2. Используйте расширение отладки React, чтобы увидеть, отображается ли компонент ResultChart.
  3. Является ли results опорой для ResultChart null или undefined ? Если это составляет основную часть этого компонента, это может быть рендеринг без содержимого.

Комментарии:

1. Привет, спасибо! Я буду использовать расширение отладки — оно у меня есть для redux, но не для react, спасибо за совет! Диалоговое окно отображается правильно с текстом, но без диаграммы. Диаграмма отображается правильно, но отображается на странице вместо диалогового окна. Компонент диаграммы используется для других диаграмм на странице. И он отображает правильную диаграмму там, но не в диалоговом окне. Есть ли способ перезаписать место отображения диаграммы? (Я новичок в React, так что, надеюсь, это имеет смысл!)

2. В итоге я решил это, но не лучшее решение. По сути, мне пришлось написать новую функцию в этом состоянии вместо того, чтобы использовать другую для диаграмм страниц. Но это работает сейчас!

3. Рад, что вы смогли это исправить, но вы должны иметь возможность повторно использовать компоненты. Моя догадка по-прежнему будет заключаться в том, что он не передает правильные данные в prop результатов, или есть какая-то переменная вне компонента, которая неправильно отображается при отображении в диалоговом окне.