我设法解决了这个问题，由于聊天gpt（我建议检查出来）。它给出的解决方案是使用一个库调用Pyodide。
Pyodide是一个旨在将Python科学堆栈引入浏览器的项目。它是一个基于Web的平台，允许用户使用WebAssembly技术直接在浏览器中运行Python代码。
chatgpt还给了我一个如何在react项目中使用Pyodide的例子

import React from 'react';
 import { useRef } from 'react';
 import { useState } from 'react';
 import { useEffect } from 'react';
 import { Pyodide } from '@jupyterlab/pyodide-extension';

const App = () => {
  // Create a reference to the Python code editor
  const pythonEditor = useRef();

  // Keep track of the output from running the Python code
  const [output, setOutput] = useState('');

  // Initialize Pyodide when the component is mounted
  useEffect(() => {
    Pyodide.loadPackage('numpy').then(() => {
      console.log('Pyodide and NumPy are ready to use!');
});
  }, []);

  // Define a function to run the Python code
  const runPythonCode = () => {
    // Get the code from the editor
    const code = pythonEditor.current.value;

    // Use Pyodide to run the code and store the result
    Pyodide.runPython(code).then(result => {
      setOutput(result);
    });
  };

  return (
    <div>
      <h1>Pyodide + React Demo</h1>
      <textarea ref={pythonEditor} />
      <button onClick={runPythonCode}>Run Python Code</button>
      <h2>Output</h2>
      <pre>{output}</pre>
    </div>
  );
};

export default App;

这个项目使用React钩子来管理状态，使用Pyodide来运行Python代码。当点击运行Python代码按钮时，编辑器中的代码将使用Pyodide执行，输出如下所示。
请注意，此项目假定Pyodide已在父组件中导入并初始化，因此如果要使用此项目，请确保将其添加到代码中