0

我尝试使用 reactjs 放入<script src="https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image"></script>我<head>的 index.html ，但是，由于某种原因，这对我不起作用。

客户端/公共/index.html

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Portal</title>

    <!-- WIRISplugin -->
    <script src="https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image"></script> 

  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

当我运行该应用程序时，数学方程式仍未显示，并且我在控制台上收到 404 错误，因为脚本无法访问 Wiris URL 并获取插件。

当前结果：

a3xy=∞∅π 21,4 mol ⇄ aΔN

预期成绩：

有人可以帮助我吗？我已经阅读了 Wiris 网站 ( https://docs.wiris.com/en/mathtype/mathtype_web/integrations/mathml-mode ) 上的文档，但我无法确定为什么这不起作用。

4

1 回答 1

0
  1. 将以下脚本添加到您的 index.html 或您要呈现 mathml 的页面
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
  1. 创建一个用于渲染数学方程式的新组件
function Latex(props) {
  const node = React.createRef();
  const renderMath = () => {
    window.MathJax.Hub.Queue(['Typeset', window.MathJax.Hub, node.current]);
  };
  useEffect(() => {
    renderMath();
  });

  return (
    <div ref={node} {...props}>
      {props.children}
    </div>
  );
}
  1. 用组件包装您的内容，<Latex />它将呈现您的方程式
于 2021-05-22T12:49:42.477 回答