Design für das Laden von Komponenten

Question

Ich habe Probleme mit dem Design einer React-Anwendung, die ich erstelle. Die App hat auf der linken Seite ein Chat-Fenster und auf der rechten Seite den Inhalt der Anwendung. Wenn ein Benutzer einen Befehl eingibt, versteht das Backend die Art des Befehls (verwendet Luis.ai und Microsoft Bot Framework), die alle wie erwartet funktioniert. Aber das React-Stück ist, wo ich mich wehre.

Angenommen, der Benutzer gibt einen Befehl ein, der besagt, dass er eine Person aktualisieren möchte, indem er "Name in Rechnung aktualisieren" eingibt. Die Anwendung versteht korrekt, dass der Befehl die Person aktualisiert und die Bearbeitungsversion meiner Personenübersicht laden soll.

Allerdings bin ich mir nicht sicher, der beste Ansatz, wie dies zu tun ist. Der Ansatz, den ich jetzt nehme, lädt im Grunde eine OverviewWrapper-Komponente. Innerhalb der Overview-Wrapper-Komponente, basierend auf den Requisiten, die an sie übergeben werden, sollte entweder der Edit- oder der View-Bereich geladen werden. Der Ansichtsbereich wird standardmäßig geladen.

Ich bin mir nicht sicher, ob ich versuchen sollte, die Edit-Komponente zu laden, indem ich den Status ändere oder ob ich versuchen sollte, die Navigationsfunktion zu verwenden. Vielen Dank im Voraus für Ihre Unterstützung.

Hier ist mein Code.

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

ich beschlossen dies nur durch Setzen eines Wertes compstate im SetState Wert eher dann versucht, das bestehende Design zu halten beide COMPNAME und compstate einzustellen. Sobald ich das tat, schien alles gut zu funktionieren.