使用 Javascript 编辑 DOM答案

【问题标题】：Editing the DOM with Javascript使用 Javascript 编辑 DOM
【发布时间】：2020-09-04 03:37:46
【问题描述】：

我正在使用 MathQuill 在我的页面上渲染乳胶，但这与渲染树冲突。

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 调用的情况下工作，但它会在页面上显示原始乳胶而不是格式化的乳胶。有没有不破坏渲染树的正确方法？

【问题讨论】：

标签： blazor

【解决方案1】：

我在 reddit 上收到了这条评论

这样做的方法是呈现 Blazor 不会尝试保留的输出踪迹。诀窍是为您的容器呈现标记，而不是在 razor 中声明它。

@((MarkupString) $"

{ContentToTransform}
")
看看有没有用

解决了我描述的问题。

【讨论】：