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 = {&nbsp; &nbsp; assemblerOutput: Array<{ line: ParsedLine; bytes: Array<HexNum> }>;&nbsp; &nbsp; currentInstruction: Instruction;&nbsp; &nbsp; currentPC: number;&nbsp; &nbsp; currentInstructionLength: number;&nbsp; &nbsp; cpuState: CPUState;&nbsp; &nbsp; terminalLines: string[]}然后向终端添加一个属性并将其绑定到数组。&nbsp; &nbsp; render(): ReactElement {&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Button key={0} onClick={ this.runNextInstruction.bind(this) }>Next</Button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TerminalView lines={ this.terminalLines } />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </>&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }您将需要为终端上的道具定义一个类，然后将渲染修改为类似于。&nbsp; &nbsp; render(props: Props): React.ReactElement {&nbsp; &nbsp; &nbsp; &nbsp; this.terminal.write(props.lines.map(value => value.toAscii()).join(""));&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <XTerm&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ref={this.terminalRef}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </>&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }我还没有机会测试这段代码。您可能需要添加逻辑以保持数组增长过大，例如保留最后几百行。