javascript - 在 reactjs 应用中使用 CodePen 前端设计
问题描述
如果您下载 codepen(使用导出),您将获得 index.html、style.css 和 script.js。
我无法弄清楚如何在 React 功能组件中使用 script.js 文件。我最初的想法是使用<script src='#'>
index.html 中的标签来导入样式脚本。这会导致问题,因为 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
解决方案
您可以将整个.js
代码移动到标签<head>
中的 html 部分中,<script>
例如:
<html>
<head>
<script>
// all scripts here for example
alert(1)
</script>
// rest of code
推荐阅读
- javascript - 如何遍历日时间数组并仅显示当前周记录
- javascript - 无法解析配置“:app:debugRuntimeClasspath”的所有任务依赖项
- flutter - Geoflutter 返回重复的快照
- android - 如何创建警报对话生成器
- postgresql - PostgreSQL 分组但在聚合函数中排序 (ST_Makeline)
- excel - 根据另一列和参数在列上查找值
- lua - 如何使用 luasql 将函数输出添加到变量
- perl - perl 子程序条目中 UNKNOWN 的奇怪副本
- react-native - 如何在 React Native 中拖放动作?
- excel - VBA将ie元素传递给函数