文章/答案/技术大牛

发布

社区首页 >问答首页 >在reactjs应用程序中使用CodePen前端设计

问在reactjs应用程序中使用CodePen前端设计
EN

Stack Overflow用户

提问于 2021-04-20 12:23:08

回答 1查看 223关注 0票数 0

如果您下载一个代码(使用导出)，您将得到一个index.html、style.css和一个script.js。

我很难弄清楚如何在React functional components中使用script.js文件。我最初的想法是在index.html中使用<script src='#'>标记来导入样式脚本。这会导致问题，因为script.js文件引用了DOM元素，而脚本是在DOM加载之前调用的。

请参见以下示例(https://codepen.io/danielkvist/pen/LYNVyPL)：

来自画笔的html：

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Slide Sign In/Sign Up form</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="container right-panel-active">
    <!-- Sign Up -->
    <div class="container__form container--signup">
        <form action="#" class="form" id="form1">
            <h2 class="form__title">Sign Up</h2>
            <input type="text" placeholder="User" class="input" />
            <input type="email" placeholder="Email" class="input" />
            <input type="password" placeholder="Password" class="input" />
            <button class="btn">Sign Up</button>
        </form>
    </div>

    <!-- Sign In -->
    <div class="container__form container--signin">
        <form action="#" class="form" id="form2">
            <h2 class="form__title">Sign In</h2>
            <input type="email" placeholder="Email" class="input" />
            <input type="password" placeholder="Password" class="input" />
            <a href="#" class="link">Forgot your password?</a>
            <button class="btn">Sign In</button>
        </form>
    </div>

    <!-- Overlay -->
    <div class="container__overlay">
        <div class="overlay">
            <div class="overlay__panel overlay--left">
                <button class="btn" id="signIn">Sign In</button>
            </div>
            <div class="overlay__panel overlay--right">
                <button class="btn" id="signUp">Sign Up</button>
            </div>
        </div>
    </div>
</div>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>

和笔中的script.js：

const signInBtn = document.getElementById("signIn");
const signUpBtn = document.getElementById("signUp");
const fistForm = document.getElementById("form1");
const secondForm = document.getElementById("form2");
const container = document.querySelector(".container");

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

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

fistForm.addEventListener("submit", (e) => e.preventDefault());
secondForm.addEventListener("submit", (e) => e.preventDefault());

我想使用如下的功能组件：

import React from 'react'

const SlideSignInUp = () => {
    return(
        <>
        html from pen goes in here
        </>
    )
}

export default SlideSignInUp

html

css

reactjs

codepen

javascript

回答 1

Stack Overflow用户

发布于 2021-04-21 14:43:06

您可以将整个.js代码移动到<script>标记中html的<head>部分中，如下所示：

<html>
<head>
<script>
// all scripts here for example
alert(1)
</script>
// rest of code

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67172437

复制

相似问题

问在reactjs应用程序中使用CodePen前端设计
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在reactjs应用程序中使用CodePen前端设计EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在reactjs应用程序中使用CodePen前端设计
EN