第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

React中兄弟姐妹之間的交流

React中兄弟姐妹之間的交流

瀟瀟雨雨 2023-04-14 15:13:55
我正在用 Typescript/React 編寫一個(gè) CPU 模擬器。我有一個(gè)CodeExecutionView,CPU和Terminal。現(xiàn)在,當(dāng)CPU觸發(fā)適當(dāng)?shù)闹噶顣r(shí),我想將一些數(shù)據(jù)寫入Terminal. 我要寫入的數(shù)據(jù)駐留在CPUstate. 我用來向終端寫入數(shù)據(jù)的功能在組件中TerminalView。我如何傳遞該函數(shù)供班級(jí)CPU使用?以下是我的代碼結(jié)構(gòu):                   ___________                  |           |                  | MAIN VIEW |                  |(component)|                  |___________|          ___________      ___________         |           |    |           |         |    CPU    |    | TERMINAL  |         |  (class)  |    |(component)|         |___________|    |___________|主要成分:type ExecutionState = {    assemblerOutput: Array<{ line: ParsedLine; bytes: Array<HexNum> }>;    currentInstruction: Instruction;    currentPC: number;    currentInstructionLength: number;    cpuState: CPUState;}type ExecutionProps = {    assemblerOutput: Array<{ line: ParsedLine; bytes: Array<HexNum> }>;}export default class ExecutionScreen extends React.Component<ExecutionProps, ExecutionState> {    state: ExecutionState = {        assemblerOutput: [],        currentInstruction: undefined,        currentPC: 0,        currentInstructionLength: 0,        cpuState: undefined    }    private CPU: CPU;    constructor(props: ExecutionProps) {        super(props);        this.CPU = new CPU(props.assemblerOutput);        this.state = {            assemblerOutput: props.assemblerOutput,            currentInstruction: this.CPU.currentInstruction,            currentPC: this.CPU.prevPC,            currentInstructionLength: undefined,            cpuState: this.CPU.getFullState()        };    }    runNextInstruction(): void {        this.CPU.executeInstruction();        this.setState({ ...this.state, currentInstruction: this.CPU.currentInstruction, currentInstructionLength: this.CPU.currentInstruction.size, currentPC: this.CPU.prevPC, cpuState: this.CPU.getFullState() });    }我不想更改代碼的結(jié)構(gòu),因?yàn)槲倚枰?CPU 類存在于主視圖中才能使其他東西正常工作
查看完整描述

1 回答

?
慕田峪7331174

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ù)組增長過大,例如保留最后幾百行。


查看完整回答
反對(duì) 回復(fù) 2023-04-14
  • 1 回答
  • 0 關(guān)注
  • 153 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)