在组件中将 Vanilla Javascript 转换为 React 应用程序答案

【问题标题】：Turning Vanilla Javascript into React app in Components在组件中将 Vanilla Javascript 转换为 React 应用程序
【发布时间】：2021-06-10 11:39:23
【问题描述】：

我正在将此登录/注册表单变成一个反应应用程序，我正在通过使用组件来构建它。我是新来的反应，所以我需要一些帮助将香草脚本变成反应组件。有人可以帮我将 vanilla js 编码成组件（带有滑动过渡）吗？

原版Javascript

const signUpButton = document.getElementById('signUp');
  const signInButton = document.getElementById('signIn');
  const container = document.getElementById('container');

     signUpButton.addEventListener('click', () => {
  container.classList.add("right-panel-active");
  });

  signInButton.addEventListener('click', () => {
  container.classList.remove("right-panel-active");
  });

和 React 组件：

export const SignForms = () => {
const [ containerActive, setContainerActive] = useState(false);
const signUpButton = () => {
    setContainerActive(false);
 };  
 const signInButton = () => {
    setContainerActive(true);
 };

.....
<div className="overlay-container">
    <div className="overlay">
        <div className="overlay-panel overlay-left">
        <div className={containerActive ?  " right-panel-active" : ""}></div>   
            <h1 className="font-effect-3d">Come On!</h1>
            <p className="font-effect-emboss">Start Your Journey With Us</p>
            <button className="ghost" onClick={signInButton} id="signIn" >Sign In</button>
        </div>
        <div className="overlay-panel overlay-right">
            <h1 className="font-effect-3d">No Account?</h1>
            <p className="font-effect-emboss">No Problem! Just Sign Up Here</p>
            <button className="ghost " onClick={signUpButton} id="signUp">Sign Up</button>
        </div>
    </div>
</div>

JsFiddle for Vanilla : https://jsfiddle.net/barrogocarlo/dyg9mqn2/ || React 应用的 Git 仓库：https://gitlab.com/carlobarrogo/sample-forms

【问题讨论】：

您应该添加minimal reproducible code，以便我们正确理解您的问题。
好的，谢谢
嘿，您的帖子并不清楚您的问题到底是什么。您是要我们从 vanilla js 转换为 React 吗？或者你是在问 vanilla js 和你的 React 转换在功能上是否相同？您应该更具体地回答可以直接回答的实际问题。
从技术上讲，我想将 vanilla js 转换为 react，看看我的 react 转换是否足够接近

标签： javascript reactjs

【解决方案1】：

你几乎在那里。跟上！！

以下是工作代码，我能够在我的沙盒上重现。 https://codesandbox.io/s/github/devpandya/SamplSignIns/tree/main/?file=/src/SignForms.js

我发现了 2 个问题：

vanila.js 中的 App.css 与您的 React 代码中的不同。只需从您的 Vanila 代码中复制它
使用 containerActive 状态来操作容器 div 中的类。

const signUpButton = () => {
    setContainerActive(true);
  };
  const signInButton = () => {
    setContainerActive(false);
  };

  return (
    <div className="signForms">
      <div
        className={`container ${containerActive && "right-panel-active"}`}
        id="container"
      >

就是这样.. !!!..

你的叠加层中还添加了一个额外的 div，只需将其删除，不要使用它

<div className="overlay-panel overlay-left">
        **<div className={containerActive ?  " right-panel-active" : ""}></div>**   
            <h1 className="font-effect-3d">Come On!</h1>

【讨论】：