Question

我正在尝试在此react组件中呈现Mathjax语法。我在Mathjax组件中具有此字符串常量，并且还在index.html中包括了Mathjax cdn和config脚本。这里有人可以帮助我吗？

import React, { Component } from 'react';

class Mathjax extends Component {
    render() {
        const text='<span style="font-family:Tahoma; font-size:10pt"><strong><span class="my-math" style="font-size:13px">\({{4\eta \Delta P} \over {{r^2}L}}\)</span></strong>&nbsp;</span>'

        return (
            <div>
             <span dangerouslySetInnerHTML={{__html:text}}></span>   
            </div>
        );
    }
}

export default Mathjax;

//App component
import React from 'react';
import './App.css';
import Mathjax from './Mathjax';
function App() {
  return (
    <div className="App">
    <Mathjax />
    </div>
  );
}

export default App;


//index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
    </script>
    <script type="text/javascript" async
      src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML">
    </script>

   <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
 </body>
</html>

正在渲染（{{r ^ 2} L}上的{{4eta Delta P}），但结果应该是 4ηΔP/ r ^ 2L

如何在提供的html字符串中呈现mathjax反应？

0 个答案: