Javascript 如何使用React在对话框（材质ui）中传入组件？

您好，我正在尝试在对话框中显示图表组件。我不明白为什么图表没有显示在对话框中。它有很多代码，所以我不能使用沙盒，但我正在努力寻找任何文档，以了解如何在对话框中引用组件，所以只需缩小问题的范围。如果有兴趣了解更多背景信息，当我单击打开对话框的按钮时，页面上呈现的是相同的图表，但我希望图表也显示在对话框中。该组件称为ResultCharts。它正在正确导入/导出。我还没有反应过来。谢谢

<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>

点击我！

很难说清楚，但我会尝试一些方法：

检查页面并将鼠标悬停在对话框上，查看图表的div是否存在

使用React调试扩展查看是否正在呈现ResultChart组件

results

prop到ResultChart

null

还是

未定义？如果这构成了该组件的主体，那么它可能在没有内容的情况下进行渲染

---

嗨，谢谢！我将使用调试扩展-我有它的redux，但没有反应，谢谢提示！对话框确实正确显示文本，但没有图表。图表显示正确，但显示在页面而不是对话框上。图表组件正在用于页面上的其他图表。它在那里呈现正确的图表，但不在对话框中。有没有办法覆盖图表应该呈现的位置？（我还没有反应过来，所以希望这是有意义的！）我最终解决了它，但不是最好的解决方案。我基本上必须在这种状态下编写一个新函数，而不是在页面图表中使用另一个函数。但它现在起作用了！很高兴您能够修复它，但您应该能够重用组件。我的直觉仍然是，它没有在results属性中传递正确的数据，或者在对话框中呈现组件时，组件外部存在某种变量的作用域不正确。