Question

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

假设用户通过输入“将名称更新为比尔”输入一个命令，表明他们想要更新某人。应用程序正确理解命令是更新人员，并应加载我个人概述的编辑版本。

但是，我不确定如何做到这一点的最佳方法。我现在采用的方法基本上加载了一个OverviewWrapper组件。在概述包装器组件内部，基于传递给它的props，应该加载Edit或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>

Answer 1

我通过仅在SetState值中设置一个值compState而不是尝试设置compName和compState来保持现有设计来解决这个问题。一旦我这样做，一切似乎都很好。

设计加载组件

1 个答案: