使用Javascript编辑DOM

Question

我正在使用MathQuill在页面上渲染latex，但这与渲染树相冲突。

blazor调用的Javascript：

RenderQuizInterface: function () {
MQ.StaticMath(document.getElementById("quizQuestion"))
for (var ele of document.getElementsByClassName("quiz-button-latex")) {
MQ.StaticMath(ele);
}
},

Blazor页面：

@page "/quiz"
@inject IJSRuntime JsRuntime;
@using Boolean_Algebra.Components.Quiz;
<h1 class="text-center main-web-width" id="title">Quiz</h1>
<QuizInterface manager="manager"/>

@code { 
public QuizManager manager;
protected override void OnInitialized()
{
AssignManager();
}
private void AssignManager() {
manager = new QuizManager();
manager.onAnswer += (s,e)=> {
AssignManager();
this.StateHasChanged();
};
}
protected override void OnAfterRender(bool firstRender)
{
JsRuntime.InvokeVoidAsync("JsFunc.RenderQuizInterface");
}
}

目前，它渲染乳胶，但在调用onAnswer事件时，它不会用新问题替换旧乳胶。这在没有JsRuntime调用的情况下可以工作，但它将在页面上显示原始乳胶，而不是格式化的乳胶。有没有一种正确的方法可以在不破坏渲染树的情况下做到这一点？

Answer 1

我在reddit 上收到了这条评论

这样做的方法是渲染Blazor不会试图保留的输出的轨道。诀窍是为容器呈现标记，而不是用剃刀声明。

@((MarkupString($"<div id=whatever>｛ContentToTransform｝<div>quot；(

看看这是否有效

它解决了我描述的问题。