0
私はビルドしているReactアプリケーションの設計に苦労しています。アプリは左にチャットウィンドウ、右にアプリケーションのコンテンツを持っています。ユーザーがコマンドを入力すると、バックエンドはコマンドの性質（Luis.aiとMicrosoft Bot Frameworkを使用する）を理解し、すべて正常に動作します。しかし、リアクト作品は私が苦労している場所です。コンポーネントをロードするためのデザイン
「Update name to Bill」と入力して、ユーザーを更新するコマンドを入力したとします。アプリケーションは、コマンドが人を更新していることを正しく理解していて、自分の人物概要の編集バージョンを読み込む必要があります。
しかし、私はこれを行う方法についての最良のアプローチを正確にはわかりません。私が取っているアプローチでは、基本的にOverviewWrapperコンポーネントが読み込まれます。渡された小道具に基づく概要ラッパーコンポーネントの内部には、編集ウィンドウまたはビューペインがロードされます。デフォルトでは、表示ペインが読み込まれます。
状態を変更して編集コンポーネントを読み込もうとしなければならない場合、またはnavigate関数を使用する必要があるかどうかはわかりません。あなたの指導のために事前にありがとうございます。
ここに私のコードです。
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>