React JS结合ASP.NET MVC登录页仅显示图片，双文本框等元素不显示求助

我之前也碰到过类似的坑，结合ASP.NET MVC和React开发时出现这种组件不渲染、只有静态图片能显示的情况，大概率是这几个环节出了问题，咱们一步步排查解决：

1. 确认React相关脚本的加载顺序 #

React和ReactDOM的加载顺序绝对不能搞反，而且必须在你的自定义组件脚本之前加载。如果顺序错了，ReactDOM找不到React核心对象，组件根本没法渲染。

正确的加载顺序应该是这样的：

<!-- 先加载React核心 -->
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<!-- 再加载ReactDOM用于挂载组件 -->
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- 最后加载你的自定义React组件脚本 -->
<script src="~/Assets/JS/your-login-component.js"></script>

2. 检查React组件的挂载逻辑（重点注意React 18的变化） #

你页面里的挂载容器是id="signup"的div，要确保你的React代码正确指向这个容器，而且用对了React 18的挂载方式：

如果还在用旧版的ReactDOM.render，虽然React 18兼容，但更推荐用新的createRoot写法，避免潜在问题：

// 正确获取挂载容器
const rootContainer = document.getElementById('signup');
// 创建根节点并渲染组件
const root = ReactDOM.createRoot(rootContainer);
root.render(<LoginComponent />);

另外要仔细检查容器的id有没有写错，比如把signup写成signin，这种低级错误很容易导致组件找不到挂载点。

3. 排查ASP.NET MVC的资源路径问题 #

• 检查你的自定义React脚本、CSS的引用路径是否正确：比如脚本用了~/Assets/JS/xxx.js，而CSS用了相对路径Assets/Css/bootstrap.min.css，建议统一路径写法，避免ASP.NET MVC解析路径出错。
• 打开浏览器的Network标签，看看有没有404的资源请求，如果脚本或CSS加载失败，组件样式和逻辑都没法正常工作。

4. 检查React组件本身的代码错误 #

打开浏览器控制台（F12），看看有没有JavaScript报错，这是最快定位问题的方式：

• 有没有忘记用Fragment（<>）或根元素包裹组件里的多个元素？React组件必须返回单个根节点，直接返回两个文本框+按钮会报错。
• 有没有语法错误、变量未定义的情况？这类错误会直接中断React的渲染流程。

完整的index.cshtml示例参考 #

给你一个能正常运行的示例，你可以对比调整自己的代码：

@{ Layout = null; }
<html>
<head>
    <meta charset="utf-8" />
    <title>登录页面</title>
    <!-- 统一用~/路径引用CSS -->
    <link href="~/Assets/Css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div class="wrapper" id="signup"></div>

    <!-- 按顺序加载React相关资源 -->
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!-- 如果直接在页面写JSX，需要引入Babel解析 -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <!-- 自定义登录组件 -->
    <script type="text/babel">
        function LoginComponent() {
            return (
                <div className="container mt-4">
                    <div className="mb-3">
                        <label className="form-label">用户名</label>
                        <input type="text" className="form-control" placeholder="请输入用户名" />
                    </div>
                    <div className="mb-3">
                        <label className="form-label">密码</label>
                        <input type="password" className="form-control" placeholder="请输入密码" />
                    </div>
                    <button className="btn btn-primary w-100">登录</button>
                </div>
            );
        }

        // 正确挂载组件到signup容器
        const root = ReactDOM.createRoot(document.getElementById('signup'));
        root.render(<LoginComponent />);
    </script>
</body>
</html>

先按上面的步骤排查，重点看控制台的报错信息，大部分问题都能快速定位解决。

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