Blazor Wasm嵌入Twitter推文无渲染问题求助

核心问题有两个：

• 推文未渲染：twttr.widgets.load()调用时机和范围不对，且脚本加载的异步逻辑有漏洞；
• Run 1重复输出：每个Tweet组件首次渲染时都会触发CallTwitter，导致全局重复执行扫描。

修复步骤 #

1. 重写JS函数，精准控制渲染目标与脚本加载 #

修改Scripts.js，让函数支持传入具体DOM元素，同时确保脚本加载完成后再执行渲染：

function CallTwitter(element) {
    if (typeof twttr !== 'undefined') {
        // 只渲染当前组件的blockquote，避免全局扫描
        twttr.widgets.load(element);
        console.log("Run 1");
    } else {
        // 脚本加载完成后立即渲染当前元素
        $.getScript('https://platform.twitter.com/widgets.js', function() {
            twttr.widgets.load(element);
            console.log("Run 2");
        });
    }
}

2. 调整Blazor组件，传递DOM元素并适配参数更新 #

修改TweetComponent，通过ElementReference获取当前组件的blockquote，传给JS函数；同时去掉firstRender的限制，确保TweetId变化时能重新渲染：

@using Microsoft.JSInterop

<blockquote class="twitter-tweet" @ref="tweetBlockquote">
    <a href="@TweetId"></a>
</blockquote>

@code {
    [Inject]
    public IJSRuntime JSRuntime { get; set; }

    [Parameter]
    public string TweetId { get; set; }

    private ElementReference tweetBlockquote;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        // 每次渲染后都执行，覆盖首次渲染和参数更新的场景
        await JSRuntime.InvokeVoidAsync("CallTwitter", tweetBlockquote);
    }
}

3. 主组件代码无需改动 #

原主组件的遍历传值逻辑保持不变：

<Tweet TweetId="@media.Url" />

为什么这样修？ #

• 定向渲染：指定渲染单个DOM元素，避免全局扫描时部分组件还未完成渲染，导致推文漏加载；
• 异步脚本处理：在$.getScript的回调中执行渲染，确保twitter脚本完全加载后再调用API，解决初始化时机问题；
• 移除firstRender限制：当TweetId更新时，组件重新渲染后会再次触发渲染逻辑，保证内容能同步更新。

内容的提问来源于stack exchange，提问作者Tim Cadieux