如何在React.js中使用EJS？附注册表单代码求助

我想在React.js项目中使用EJS，下面是我打算集成到React前端的注册表单EJS代码，后端通过JS文件将数据存入MySQL数据库。试过多种方法，甚至用在线转换器都没成功，求解决方案。

原EJS代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Currency Converter in Javascript</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
  </head>
  <body>
    <div class="container col-sm-12" id="mainform">
        <div id="signupbox" style=" margin-top:50px" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">                                    
            <div class="panel panel-info">
                <div class="panel-heading">
                    <div class="panel-title">Register</div>
                </div>
                <div class="panel-body" >
                    <form class="form-horizontal" role="form" method="post" action="/" enctype="multipart/form-data">
                        <% if (message.length > 0) { %>
                            <div class="alert alert-success col-sm-12"><%= message %></div>
                        <% } %>
                        <div id="signupalert" style="display:none" class="alert alert-danger">
                            <p>Error:</p>
                            <span></span>
                        </div>
                        <div class="form-group">
                            <label for="first_name" class="col-md-3 control-label">First Name</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control" name="first_name" placeholder="First Name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="last_name" class="col-md-3 control-label">Last Name</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control" name="last_name" placeholder="Last Name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="mob_no" class="col-md-3 control-label">Mobile Number</label>
                            <div class="col-md-9">
                                <input type="number" class="form-control" name="mob_no" placeholder="Mobile Number">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="mob_no" class="col-md-3 control-label">Profile Image</label>
                            <div class="col-sm-9">
                                <input class="form-control" type="file" name="uploaded_image" accept=""/>
                            </div>
                        </div>                                
                        <div class="form-group">
                            <label for="user_name" class="col-md-3 control-label">User Name</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control" name="user_name" placeholder="User Name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="password" class="col-md-3 control-label">Password</label>
                            <div class="col-md-9">
                                <input type="password" class="form-control" name="password" placeholder="Password">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-offset-3 col-md-9">
                                <button id="btn-signup" type="submit" class="btn btn-info"><i class="icon-hand-right"></i> &nbsp Register</button>
                            </div>
                        </div>  
                    </form>
                 </div>
            </div>
        </div>
    </div>
</body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</html>

方法一：将EJS转换为React组件（推荐） #

React使用JSX语法，直接将EJS改成React组件更适配项目生态，以下是转换后的代码：

import { useState } from 'react';

const RegisterForm = () => {
  const [message, setMessage] = useState('');
  const [error, setError] = useState('');
  const [formData, setFormData] = useState({
    first_name: '',
    last_name: '',
    mob_no: '',
    uploaded_image: null,
    user_name: '',
    password: ''
  });

  const handleInputChange = (e) => {
    const { name, value, files } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: files ? files[0] : value
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
    
    const form = new FormData();
    Object.keys(formData).forEach(key => {
      form.append(key, formData[key]);
    });

    try {
      const response = await fetch('/', {
        method: 'POST',
        body: form
      });
      const result = await response.json();
      if (response.ok) {
        setMessage(result.message);
        setFormData({
          first_name: '',
          last_name: '',
          mob_no: '',
          uploaded_image: null,
          user_name: '',
          password: ''
        });
      } else {
        setError(result.error);
      }
    } catch (err) {
      setError('提交失败，请稍后重试');
    }
  };

  return (
    <div className="container col-sm-12" id="mainform">
      <div id="signupbox" style={{ marginTop: '50px' }} className="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
        <div className="panel panel-info">
          <div className="panel-heading">
            <div className="panel-title">Register</div>
          </div>
          <div className="panel-body">
            <form className="form-horizontal" onSubmit={handleSubmit} encType="multipart/form-data">
              {message && (
                <div className="alert alert-success col-sm-12">{message}</div>
              )}
              {error && (
                <div className="alert alert-danger">
                  <p>Error:</p>
                  <span>{error}</span>
                </div>
              )}
              <div className="form-group">
                <label htmlFor="first_name" className="col-md-3 control-label">First Name</label>
                <div className="col-md-9">
                  <input
                    type="text"
                    className="form-control"
                    name="first_name"
                    placeholder="First Name"
                    value={formData.first_name}
                    onChange={handleInputChange}
                  />
                </div>
              </div>
              <div className="form-group">
                <label htmlFor="last_name" className="col-md-3 control-label">Last Name</label>
                <div className="col-md-9">
                  <input
                    type="text"
                    className="form-control"
                    name="last_name"
                    placeholder="Last Name"
                    value={formData.last_name}
                    onChange={handleInputChange}
                  />
                </div>
              </div>
              <div className="form-group">
                <label htmlFor="mob_no" className="col-md-3 control-label">Mobile Number</label>
                <div className="col-md-9">
                  <input
                    type="number"
                    className="form-control"
                    name="mob_no"
                    placeholder="Mobile Number"
                    value={formData.mob_no}
                    onChange={handleInputChange}
                  />
                </div>
              </div>
              <div className="form-group">
                <label htmlFor="uploaded_image" className="col-md-3 control-label">Profile Image</label>
                <div className="col-sm-9">
                  <input
                    className="form-control"
                    type="file"
                    name="uploaded_image"
                    onChange={handleInputChange}
                  />
                </div>
              </div>
              <div className="form-group">
                <label htmlFor="user_name" className="col-md-3 control-label">User Name</label>
                <div className="col-md-9">
                  <input
                    type="text"
                    className="form-control"
                    name="user_name"
                    placeholder="User Name"
                    value={formData.user_name}
                    onChange={handleInputChange}
                  />
                </div>
              </div>
              <div className="form-group">
                <label htmlFor="password" className="col-md-3 control-label">Password</label>
                <div className="col-md-9">
                  <input
                    type="password"
                    className="form-control"
                    name="password"
                    placeholder="Password"
                    value={formData.password}
                    onChange={handleInputChange}
                  />
                </div>
              </div>
              <div className="form-group">
                <div className="col-md-offset-3 col-md-9">
                  <button id="btn-signup" type="submit" className="btn btn-info">
                    <i className="icon-hand-right"></i> &nbsp Register
                  </button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
};

export default RegisterForm;

转换核心要点： #

• 用React的useState钩子替代EJS的模板变量，管理表单数据、成功/错误提示
• 将原生表单提交改为React的onSubmit事件，用fetch替代jQuery发送请求
• 把HTML的class属性改为React的className，内联样式从字符串转为对象格式
• 文件上传通过FormData处理，和后端接口保持兼容

方法二：在React项目中直接集成EJS（兼容方案，不推荐） #

如果必须保留EJS语法，可以通过webpack loader实现：

1. 安装依赖：

npm install ejs ejs-react-loader --save-dev

2. 在webpack配置文件中添加loader规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.ejs$/,
        use: ['ejs-react-loader']
      }
    ]
  }
};

3. 在React组件中导入并使用EJS文件：

import RegisterEJS from './register.ejs';

const RegisterPage = () => {
  const message = ''; // 传入EJS需要的变量
  return <RegisterEJS message={message} />;
};

export default RegisterPage;

注意： #

这种方式会让项目混合两种模板语法，不利于长期维护，EJS的服务端渲染逻辑需要手动在React组件中传入变量，无法直接复用后端的EJS上下文。

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