如何使用 React 进行交互式 MathML？

Answer 1

math

元素似乎是完全有效的 HTML，这意味着它在 React 的 JSX 中也应该可以正常工作。我在 JSX 中看到的唯一问题是

mi

元素的

onClick

处理程序。当它应该是 JSX 中的函数时，您已经指定了一个字符串值，例如将

onClick="console.log('hello')"

更改为

onClick={() => console.log('hello')}

。

示例：

function App() {
  return (
    <div className="App">
      <math xmlns="http://www.w3.org/1998/Math/MathML">
        <mi onClick={() => console.log('hello')}>&lambda;</mi>
        <mi>y</mi>
        <mo>.</mo>
        <mi>x</mi>
        <mi>y</mi>
      </math>
    </div>
  );
}

const rootElement = document.getElementById("root");
const root = ReactDOM.createRoot(rootElement);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.0.0/umd/react-dom.production.min.js"></script>
<div id="root" />