Reactjs 如何用Reaction做交互式的MathML

发布于01月14日

将数学表达式编写为文本会使其非常难看

<p>λy.xy</p>

results in this:

用MathML做这件事似乎更好

<math xmlns="http://www.w3.org/1998/Math/MathML">
    <mi>&lambda;</mi>
    <mi>y</mi>
    <mo>.</mo>
    <mi>x</mi>
    <mi>y</mi>
</math>

gives:

(On math stack exchange it's even nicer with the same MathML: , but I'm not sure yet how to get that without MathJax)

我想在我的Reaction应用程序中拥有更好的外观，但它似乎不接受<math>的标签.有没有类似于JSX的解决方案，可以让我像下面的HTML一样使用RESPECT交互？

<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>

推荐答案

math元素似乎是完全有效的HTML，这意味着它应该也可以在JSX的Reaction中很好地工作.我在您的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" />