如何使用 React 在对话框（material-ui）中传递组件？

Question

您好，我正在尝试在对话框中显示图表组件。我很困惑为什么图表没有在对话框内呈现。这是很多代码，所以我不能做沙盒，但我很难找到任何文档来查看应该如何在对话框中引用组件，所以只是缩小问题的范围。如果有兴趣了解更多背景信息，当我单击打开对话框的按钮时，页面上会呈现相同的图表，但我希望图表也出现在对话框中。该组件称为 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>

Answer 1

很难确切地说，但我会尝试一些事情：

1. 检查页面并将鼠标悬停在对话框上以查看图表的 div 是否存在。
2. 使用 React 调试扩展来查看 ResultChart 组件是否正在呈现。
3. results 属性是 ResultChart null 还是 undefined？如果它构成了该组件的主体，则它可能会在没有内容的情况下呈现。