用于加载组件的设计

Question

我正在为我正在构建的React应用程序的设计而苦苦挣扎。应用程序在左侧有一个聊天窗口，在右侧有应用程序的内容。当用户输入命令时，后端理解命令的性质(使用Luis.ai和Microsoft Bot Framework)，所有这些都按预期工作。然而，React部分是我正在努力的地方。

假设用户输入一条命令，声明他们想要通过输入"Update name to Bill“来更新一个人。应用程序正确地理解该命令是update The person，并且应该加载my person概述的编辑版本。

然而，我不确定如何做到这一点的最佳方法。我现在采用的方法基本上是加载一个OverviewWrapper组件。在Overview包装器组件内部，基于传递给它的属性，应该加载Edit或View窗格。默认情况下会加载View窗格。

我想我不确定是否应该尝试通过更改状态来加载编辑组件，或者是否应该尝试使用导航功能。提前感谢您的指导。

这是我的代码。

export default class Patient extends React.Component {
 constructor(props) {
 super(props);
 autoBind(this);

 this.directLine = new DirectLine({
  secret: "SOMEVALUEHERE"
 });

 this.state = {
  PATIENT: [],
  COMPPROPS: [],
 };

 this.setPanelState = this.setPanelState.bind(this);
}

 //Set State of COMPPROPS so that compState should be edit
setPanelState(activity) {
      var _compState = 'Edit';
      var _compName = 'Overview';
      this.setState({COMPPROPS: [{compName: 'Overview', compState: _compState}]});
      return _compState;
}

componentWillMount() {   

getPatient().then((result) => {
    this.setState({PATIENT: result});
});

//review any chat activity and if the command is update patient then run setpanelstate method which should set the state
this.directLine.activity$
    .filter(function (activity) {
      return activity.type === 'event' && activity.value === 'Update Patient';
    })
    .subscribe((activity) => {
      console.log("Im editing the overview");
     var _compState2
     _compState2 = this.setPanelState(activity);
     console.log('CompStateVar:'+_compState2)
    })
}

render() {
const OverviewWrapper = this.state.COMPPROPS.compState === 0 ? OverviewEditPane: OverviewPane
return (
...
                      <Box colorIndex='light-2'  direction='row' flex={false}>
                               <div>
                                <OverviewWrapper overview={this.state.PATIENT} ovtype={this.state.COMPPROPS} />
                              </div>
                      </Box>