如何在React组件中使用/存储ASP.NET局部视图并正常渲染为JSX？

云上老周

2026-5-22

问题1：如何在React组件中使用/存储ASP.NET局部视图并将其作为JSX使用？

嘿，这个问题的核心在于：ASP.NET局部视图是服务器端生成的HTML字符串，而JSX本质是React用来描述UI的JavaScript语法糖，最终会被编译成React元素对象。所以没法直接把局部视图“转成”JSX，但有几种实用的方案适配不同场景：

服务器端注入初始HTML：如果你的React应用是服务器端渲染（比如用ASP.NET Core React模板），可以在页面加载时把局部视图的HTML直接渲染到页面的某个容器里，然后让React组件挂载到这个容器上。不过要注意，这种方式下React会接管后续的DOM更新，如果局部视图需要和React状态交互，可能会有冲突。
用React Portal关联独立DOM：如果局部视图是独立的、不需要和React状态深度交互的内容，可以在页面上预留一个DOM容器，让ASP.NET把局部视图渲染到这个容器中，然后React通过Portal把组件内容和这个DOM关联起来。这种方式适合局部视图是静态内容的场景。
将局部视图重构为React组件：这是长期来看最推荐的方案。把局部视图里的UI结构、交互逻辑用JSX重写成React组件，局部视图原本依赖的服务器端数据，改成通过API接口获取。这样不仅能完全融入React的生态，还能享受到React的状态管理、组件复用等特性，代码维护性也更高。

问题2：React中渲染服务器返回的HTML显示为文本，不想用dangerouslySetInnerHTML的解决方案

首先得说清楚：React默认会自动转义所有字符串内容，目的是防止XSS攻击，所以你直接把HTML字符串放在JSX里，它只会被当成纯文本显示，这是React的安全设计。

如果你不想用dangerouslySetInnerHTML，其实只有一个彻底的替代方案——把服务器返回的局部视图内容重构为React组件，也就是我在问题1里提到的第三种方案。把局部视图的HTML结构、交互逻辑用JSX重写，数据通过API获取，然后直接在React中渲染组件，完全避开HTML字符串的问题。

不过如果只是临时需要渲染服务器返回的HTML，其实dangerouslySetInnerHTML并没有那么“危险”，只要你对HTML内容做安全净化就行。可以用dompurify这个库过滤掉恶意脚本，再渲染，步骤如下：

先安装依赖：

npm install dompurify

在组件中使用：

import DOMPurify from 'dompurify';
import React from 'react';

class YourComponent extends React.Component {
  state = { partiallogin: '' };

  componentDidMount() {
    this.GetPartialLogin();
  }

  GetPartialLogin() {
    axios.get('/account/loginpartial')
      .then(o => {
        // 净化HTML，去除恶意代码
        const cleanHtml = DOMPurify.sanitize(o.data);
        this.setState({ partiallogin: cleanHtml });
      })
      .catch(err => {
        console.error('获取局部视图失败:', err);
      });
  }

  render() {
    return (
      <div className="col noselect"
        dangerouslySetInnerHTML={{ __html: this.state.partiallogin }}
      />
    );
  }
}

这种方式既满足了渲染服务器HTML的需求，又通过净化降低了安全风险，是官方认可的安全用法。

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