ReactJS中无法将登录表单渲染到指定div内的问题求助

看起来你是想把React的登录表单组件嵌入到id="content1"的div里，但遇到了困难。我来帮你一步步排查和解决：

首先，先确认几个关键问题，然后给出完整的实现方案：

1. 修正React组件的class属性 #

React的JSX里，HTML元素的class属性要写成className（因为class是JavaScript的关键字），所以你的表单要调整：

class NameForm extends React.Component {
  handleSubmit = (e) => {
    e.preventDefault();
    // 在这里添加你的登录逻辑，比如获取表单值、发送请求等
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <div className="content">
          {/* 这里填充你的表单具体结构，比如用户名、密码输入框 */}
          <div className="form-group">
            <label>ADID凭证</label>
            <input type="text" className="form-control" placeholder="输入你的ADID" />
          </div>
          <div className="form-group">
            <label>密码</label>
            <input type="password" className="form-control" placeholder="输入密码" />
          </div>
          <button type="submit" className="btn btn-primary">登录</button>
        </div>
      </form>
    );
  }
}

2. 确保ReactDOM.render正确指向目标容器 #

你的ReactDOM.render代码需要准确获取id="content1"的div，并且要等DOM加载完成后再执行，否则可能找不到这个元素。修改你的渲染代码：

// 监听DOM加载完成事件，确保目标容器已经存在
document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <NameForm />,
    document.getElementById('content1')
  );
});

3. 注意DOM结构的替换问题 #

如果直接渲染到content1，React会替换掉这个div里原有的<h4>使用ADID凭证登录</h4>内容。如果你想保留这个标题，建议在content1里新增一个子容器专门放表单：

<div class="header header-primary text-center" id="content1"> 
  <h4>使用ADID凭证登录</h4>
  <!-- 新增这个容器用来放React表单 -->
  <div id="login-form"></div>
</div> 
<script src="@Url.Content("~/Assets/JS/Tutorial.jsx")"></script>

然后修改渲染代码指向这个子容器：

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <NameForm />,
    document.getElementById('login-form')
  );
});

4. 确保JSX被正确编译 #

浏览器不能直接识别JSX语法，所以你需要确保：

• 要么用Babel把JSX转译成普通JavaScript（比如在构建流程中配置）
• 要么在页面中引入Babel的CDN来实时转译（适合开发环境），比如在你的脚本前添加：

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel" src="@Url.Content("~/Assets/JS/Tutorial.jsx")"></script>

（注意脚本的type要设为text/babel）

按照这些步骤调整后，你的React表单应该就能成功嵌入到指定的div里了。

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