在React中，如何确保对页面的更新在MathJax中正确呈现？
在React中，如何确保对页面的更新在MathJax中正确呈现？
提问于 2020-08-20 08:21:57
对于某些上下文，在我的HTML中，我在第一个脚本标记中导入了MathJax源代码：
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<script type="text/javascript" async src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [["$", "$"], ["\\(", "\\)"]],
displayMath: [["$$", "$$"]], ["\\[", "\\]"]
processEscapes: true
}
});
</script>
<script type="text/javascript" src="https://cdnjs.loli.net/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Ne computational engine</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>我创建了一个React组件：
class Latex extends React.Component{
constructor(props){
super(props)
this.node = React.createRef();
}
componentDidMount(){
this.renderMath();
}
componentDidUpdate(){
this.renderMath();
}
renderMath(){
window.MathJax.Hub.Queue([
"Typeset",
window.MathJax.Hub,
this.node.current
]);
}
render(){
const {text} = this.props;
return <div ref = {this.node}> {this.props.children}</div>;
}
}
export default Latex;这样我就可以在里面嵌套我的App组件了：
ReactDOM.render(
<Latex>
<App />
</Latex>,
document.getElementById('root')
);当组件第一次挂载时，它工作得很好，所以如果我有，比如在我的应用程序组件的标记中使用$$\phi$$，它将完全可以在Latex中呈现。
然而，在另一个React组件中，在表单提交后从后端获取数据，然后显示它，显示的数据都不会以Latex呈现。
为了添加数据，我有以下组件和帮助器函数，它们非常混乱，但工作得很好。(除了mathjax似乎没有将文本呈现为Latex这一事实之外)
class CLI extends React.Component{
constructor(props){
super(props)
this.state = {value: '',
interepreted: '',
label: ''}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event){
this.setState({value: event.target.value})
}
handleSubmit(event){
event.preventDefault()
const url = "/input"
const ul = document.getElementById("ul-info")
let resp = ""
fetch(url+"/commands", {method: "POST", body: JSON.stringify(this.state.value),
headers: new Headers({
"content-type": "application/json"
})}
).then(function(response) {
resp = response
response.json().then(function(data) {
console.log(data);
process_commands(ul,data)
});
})
.catch(function(error) {
console.log("Fetch error: " + error);
});
}
render(){
return(
<form onSubmit = {this.handleSubmit}>
<label>
<textarea value ={this.state.value}
onChange = {this.handleChange} draggable = "false" cols = "70" rows = "2"/>
<input type = "submit" value = "=" />
</label>
</form>
)
}
}并提供以下辅助函数：
function createNode(element){
return document.createElement(element);
}
function append(parent,el){
return parent.appendChild(el);
}
function process_commands(ul,data){
var n;
var i;
var j;
var k;
for(n = 0; n<data.info.length;n++){
if(data.labels[n] != null){
let label = createNode("h2");
label.innerHTML = `${data.labels[n]}`;
append(ul,label);
}
if(data.labels[n] == "zeroes" || data.labels[n] == "partialderivative" || data.labels[n] == "partialintegral"){
for(i = 0; i <data.info[n].length;i++){
let sublabel = createNode("h3");
sublabel.innerHTML = `${data.info[n][i][0]}`;
append(ul,sublabel);
for(j = 0; j<data.info[n][i][1].length; j++){
let sublabel_function = createNode("h4");
sublabel_function.innerHTML = `${data.info[n][i][1][j][0]}`;
append(ul, sublabel_function);
for(k=0; k<data.info[n][i][1][j][1].length; k++){
let solution = createNode("p");
solution.innerHTML = `${data.info[n][i][1][j][1][k][0]}` + " : " + `${data.info[n][i][1][j][1][k][1]}`;
append(ul,solution)
}
}
}
}
}
}但是Latex组件不会将这些新创建的标记呈现到Latex中。我在想，也许我使用Mathjax的方式并不是有意的，或者我添加新的超文本标记语言标记的方式与LatexReact组件的componentdidUpdate()方法不兼容。我已经试图找出如何解决这个问题几个小时了，我在这里关注了MathJax的其他帖子，但他们都没有解决这个问题(或者没有任何修复改变任何东西)。
(提醒一下，数据显示得非常好，但以常规文本显示，而不是以Latex显示)
回答 1
Stack Overflow用户
发布于 2021-10-29 10:32:32
根据我调查Mathjax没有排版即使在孩子中有变化，这里的简单检查是传递一个道具给Latex组件，无论是日期时间还是其他什么，只要在DOM中有变化的时候改变道具，所以LATEX组件将获得道具更改，所以它将触发MathJax排版，这对我很有效。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63496681
复制相关文章
相似问题
腾讯云开发者
