React组件无法以标签形式在ASP.NET Core Razor页面渲染

直接在Razor页面写<App></App>不会自动渲染成React组件——浏览器无法将自定义HTML标签关联到你的React组件，必须通过React显式处理这些元素。同时你的代码存在几个关键配置/引用问题：

• 浏览器无法直接解析JSX文件，必须先编译为普通JS
• 缺少React组件的挂载逻辑，没有告诉React去处理页面中的自定义标签
• React版本不一致（页面CDN用16.8，package.json依赖17.0.1）

1. 确保JSX被正确编译并引用 #

先执行你的build脚本编译JSX文件：

npm run build

编译完成后，在Index.cshtml中引用编译后的JS文件，而非原JSX文件：

<script src="@Url.Content("~/js/build/App.js")" type="module"></script>

2. 修改App.jsx，添加挂载逻辑 #

在组件导出后，添加代码让React找到页面中的自定义标签并渲染组件：

import React from 'react';
import ReactDOM from 'react-dom';

export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = { message: 'Hello, World! aa' };
    }

    render() {
        return (
            <div>
                <h1>{this.state.message}</h1>
            </div>
        );
    }
}

// 浏览器会将<App>解析为小写<app>，所以查询时用小写标签名
document.querySelectorAll('app').forEach(element => {
    ReactDOM.render(<App />, element);
});

3. 统一React版本（可选但推荐） #

将页面CDN引用与package.json中的版本保持一致，例如换成17.0.1版本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.development.js"></script>

4. 调整页面中的组件标签 #

将页面中的<App></App>改为小写（符合HTML自定义标签规范）：

<app></app>

如果想实现更贴近原生的自定义标签体验，可以将React组件包装为Web Components，浏览器会自动识别渲染：

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = { message: 'Hello, World! aa' };
    }

    render() {
        return (
            <div>
                <h1>{this.state.message}</h1>
            </div>
        );
    }
}

class AppWebComponent extends HTMLElement {
    connectedCallback() {
        ReactDOM.render(<App />, this);
    }
}

// 注册自定义元素
customElements.define('app-component', AppWebComponent);

页面中直接使用：

<app-component></app-component>

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