Blazor RenderFragment 到字符串

我正在开发一个代码块组件.Net 6 Blazor wasm。我需要显示RenderFragment as string并在我的 html 中渲染该组件。

这是我的代码块组件，

<pre class="language-html">
    <code class="language-html">
        @("Some way to get non rendered html from @ChildContent")
    </code>
</pre>

@ChildContent

@code
{
    [Parameter]
    public RenderFragment ChildContent { get; set; }
}

我使用上述组件，

<CodeBlock>
    <Chat></Chat>
</CodeBlock>

预期输出：

<Chat></Chat> 
<!-- This is the input I passed inside as RenderFragment and I need the exact Render Fragement Code; 
not the Rendered Html code of the RenderFragment -->

组件按预期渲染。但无法获取我的非渲染 htmlRenderFragment

一种选择是通过RenderFragment内容作为字符串参数CodeBlock成分。但这会导致重复且不可读HTML。当ChildContent有多行代码。

<CodeBlock Html="@("<Chat></Chat>")">
    <Chat></Chat>
</CodeBlock>

关于如何实现这一目标有任何提示/建议吗？

这是一个很难回答的问题。据我了解，您希望能够呈现ChildContent您的组件的同时还能够查看ChildContent数据为纯文本 Razor 代码，或者 HTML（如果您的文件中有这样的内容）ChildContent, right?

所以一个选择是围绕你的@ChildContent渲染器标签带有<div>并在父组件初始化时为该 div 分配一个唯一的 id。然后创建另一个变量，我们称之为private string RawContent { get; set; }。然后编写一个 javascript 函数，该函数接受 id 值并通过 id 从 DOM 获取元素并返回该元素的innerHTML.

我创建了一个测试项目来尝试它并且它有效。以下是相关的片段。

In your Component.razor file:

@inject IJSRuntime JS
<pre class="language-html">
    <code class="language-html">
        @RawContent
    </code>
</pre>

<div id="@ElementId">
    @ChildContent
</div>
@code
{
    [Parameter]
    public RenderFragment ChildContent { get; set; }
    private ElementReference DivItem { get; set; }
    private string RawContent { get; set; }
    private Guid ElementId { get; set; } = Guid.NewGuid();

    protected async override Task OnInitializedAsync()
    {
        base.OnInitializedAsync();

        RawContent = await JS.InvokeAsync<string>("GetElementHtmlText", ElementId.ToString());
    }
}

然后在你的index.html文件将其添加到 a 的一侧<script>标签，或您的 JavaScript 文件之一：

async function GetElementHtmlText(elementID) {
            await setTimeout(() => {  }, 1);
            console.log(elementID);
            var element = document.getElementById(elementID);
            console.log(element);
            var result = element.innerHTML;
            console.log(result);
            return result;
        }

然后，在您希望使用此组件的任何地方，您都将呈现 HTML 标记并提供原始文本。但是，此函数将返回所有 html 标记原始文本，这意味着您可以获得 razor 标签和 Blazor 插入的空注释元素（即<!--!-->）。但只要您知道您可以解决它们。

我没有这样做，但你可以修改它以调用 JSInterop 函数RawContent的 getter 而不仅仅是在组件初始化时。