详细信息：如果您观看视频，您可以看到确切的问题，第一个对话框工作正常，但嵌套对话框没有，由于某种原因无法访问，任何帮助将不胜感激。
版本信息：
节点--版本 v12.16.1
npm --版本 6.13.4
“反应”：“^16.13.0”，
"_from": "@sencha/ext-react-modern@^7.2.0"
如果您需要任何其他可以帮助解决此问题的方法，请告诉我。
这是我的代码：
import React, { Component } from 'react';
import { Container, Button } from '@sencha/ext-react-modern';
import { Dialog } from '@sencha/ext-react-modern';
export default class NestedDialogs extends Component {
state = {
showGrandfatherDialog: false
}
showGrandfatherDialog = () => {
//debugger;
this.setState({ showGrandfatherDialog: true });
}
destroyGrandfatherDialog = () => {
//debugger;
this.setState({ showGrandfatherDialog: false });
}
render() {
const { showGrandfatherDialog } = this.state;
return (
<Container
viewport={true}
layout={{ type: 'vbox', pack: 'center', align: 'middle'}}
>
<Button text="Show Grandfather Dialog" handler={this.showGrandfatherDialog} ui="action raised" />
{showGrandfatherDialog === true &&
<GrandfatherDialog
displayed={showGrandfatherDialog}
destroy={this.destroyGrandfatherDialog}
>
</GrandfatherDialog>
}
</Container>
)
}
}
class GrandfatherDialog extends Component {
state = {
showFatherDialog: false
}
showFatherDialog = () => {
//debugger;
this.setState({ showFatherDialog: true });
}
destroyFatherDialog = () => {
//debugger;
this.setState({ showFatherDialog: true });
}
render() {
const { showFatherDialog } = this.state;
return (
<Dialog
displayed={this.props.displayed}
title="Grandfather Dialog"
closable="true"
width="600"
height="600"
layout={{ type: 'vbox', pack: 'center', align: 'middle'}}
onDestroy={this.props.destroy}
>
<Button text="Show Father Dialog" handler={this.showFatherDialog} ui="action raised" />
{showFatherDialog === true &&
<FatherDialog
displayed={showFatherDialog}
destroy={this.destroyFatherDialog}
>
</FatherDialog>
}
</Dialog>
);
}
}
class FatherDialog extends Component {
render() {
return (
<Dialog
displayed={this.props.displayed}
title="Father Dialog"
closable="true"
width="400"
height="400"
onDestroy={this.props.destroy}
>
</Dialog>
);
}
}