用于实时显示日志文件（Flask后端）的操作]]

Question

我有一个工作代码（Flask +纯JS），它实时显示不断增长的日志文件。我将其转换为ReactJS时遇到问题。

app.py（烧瓶，工作代码，没有问题）

@app.route('/stream')
def stream():
    def generate():
        fname="/Users/xxx/tmp/log.txt"
        with open(fname) as f:
            while True:
                yield f.read()
                sleep(1)
    return 
    app.response_class(generate(), mimetype='text/plain')

app.run()
index.html（普通JS，没有问题）

<pre id="output"></pre>
<script>
    var output = document.getElementById('output');
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '');
    xhr.send();

    setInterval(function() {
        output.textContent = xhr.responseText;
    }, 1000);
</script>
下面是我将其转换为React的尝试。

在MyPage.jsx上，我将按钮“显示实时日志”。当用户单击此按钮时，应该弹出“模态对话框”并显示日志。

文件：MyPage.jsx

import Modal from 'react-bootstrap/Modal'
import { Button } from 'react-bootstrap'

const showLog = (e) => {
    render(<ModalLog />,  document.getElementById('output'));
}

const MyPage = () => {
  return (
    <div>
          <div id="output"></div>
          <button type="button" onClick={showLog}>Show Real Time Log</button>
</div
}

function ModalLog() {
  const [show, setShow] = useState(true);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Real Time Log</Modal.Title>
        </Modal.Header>
        <Modal.Body> Log file live update goes here </Modal.Body>
        <Modal.Footer>
          <Button variant="primary" onClick={handleClose}>
            Close
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}
问题：

1. 将当前位于我的index.html中的JS代码放入MyPage.jsx的位置？

2. 当我按下按钮“显示实时日志”时，模态仅在关闭后第一次显示，再也不会显示。我了解这是因为调用了handleClose（），但如何解决它？

我有一个工作代码（Flask +纯JS），它实时显示不断增长的日志文件。我将其转换为ReactJS时遇到问题。 app.py（烧瓶，工作代码，没有问题）@ app.route（'/ stream'）def ...

Answer 1

（（1）当前在我的index.html中的JS代码放入MyPage.jsx的位置？