React中兄弟姐妹之间的交流

Question

我正在用 Typescript/React 编写一个 CPU 模拟器。我有一个CodeExecutionView，CPU和Terminal。现在，当CPU触发适当的指令时，我想将一些数据写入Terminal. 我要写入的数据驻留在CPUstate. 我用来向终端写入数据的功能在组件中TerminalView。我如何传递该函数供班级CPU使用？以下是我的代码结构：                   ___________                  |           |                  | 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() });    }我不想更改代码的结构，因为我需要 CPU 类存在于主视图中才能使其他东西正常工作

Answer 1

React 中的兄弟姐妹不直接通信，而是需要通过共享父级进行通信，共享父级拥有共享状态。您可以在主视图状态中定义一个数组来保存终端线。然后 CPU 可以推送到该数组。在下面的代码中，我命名了这个变量terminalLines。

type ExecutionState = {

    assemblerOutput: Array<{ line: ParsedLine; bytes: Array<HexNum> }>;

    currentInstruction: Instruction;

    currentPC: number;

    currentInstructionLength: number;

    cpuState: CPUState;

    terminalLines: string[]

}

然后向终端添加一个属性并将其绑定到数组。

    render(): ReactElement {

        return (

            <>

                <Button key={0} onClick={ this.runNextInstruction.bind(this) }>Next</Button>

                <TerminalView lines={ this.terminalLines } />

            </>

        );

    }

您将需要为终端上的道具定义一个类，然后将渲染修改为类似于。

    render(props: Props): React.ReactElement {

        this.terminal.write(props.lines.map(value => value.toAscii()).join(""));

        return (

            <>

                <XTerm

                    ref={this.terminalRef}

                />

            </>

        );

    }

我还没有机会测试这段代码。您可能需要添加逻辑以保持数组增长过大，例如保留最后几百行。