1 回答

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超13個(gè)贊
React 中的兄弟姐妹不直接通信,而是需要通過共享父級(jí)進(jìn)行通信,共享父級(jí)擁有共享狀態(tài)。您可以在主視圖狀態(tài)中定義一個(gè)數(shù)組來保存終端線。然后 CPU 可以推送到該數(shù)組。在下面的代碼中,我命名了這個(gè)變量terminalLines。
type ExecutionState = {
assemblerOutput: Array<{ line: ParsedLine; bytes: Array<HexNum> }>;
currentInstruction: Instruction;
currentPC: number;
currentInstructionLength: number;
cpuState: CPUState;
terminalLines: string[]
}
然后向終端添加一個(gè)屬性并將其綁定到數(shù)組。
render(): ReactElement {
return (
<>
<Button key={0} onClick={ this.runNextInstruction.bind(this) }>Next</Button>
<TerminalView lines={ this.terminalLines } />
</>
);
}
您將需要為終端上的道具定義一個(gè)類,然后將渲染修改為類似于。
render(props: Props): React.ReactElement {
this.terminal.write(props.lines.map(value => value.toAscii()).join(""));
return (
<>
<XTerm
ref={this.terminalRef}
/>
</>
);
}
我還沒有機(jī)會(huì)測(cè)試這段代碼。您可能需要添加邏輯以保持?jǐn)?shù)組增長過大,例如保留最后幾百行。
添加回答
舉報(bào)