加载组件的设计

Question

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

假设用户输入了一个命令，该命令表明他们想通过输入 "Update name to Bill" 来更新一个人。应用程序正确理解该命令是更新人物并且应该加载我的人物概览的编辑版本。

但是我不确定执行此操作的最佳方法。我现在采用的方法基本上是加载一个 OverviewWrapper 组件。根据传递给它的道具，Overview 包装器组件内部应该加载编辑或视图窗格。默认加载视图窗格。

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

这是我的代码。

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 来保留现有设计来解决此问题。一旦我这样做了，一切似乎都很好。

加载组件的设计

Design For Loading Components

reactjs

direct-line-botframework