问题描述
我是2个月前才开始编程的新手。 React对我来说也只有2周的时间。我正在使用React Redux Router来保持对更改组件的控制。我还在index.html中打开了门户网站<div id="portal"></div>：
这是我的 index.js 基本结构内部
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import { createStore } from "redux";
import { Provider } from "react-redux";
import rootReducer from "./reducers/index";
import { browserRouter as Router,Route,Switch } from "react-router-dom";
import NavBar from "./components/shared/NavBar/NavBar";
import Footer from "./components/shared/Footer/Footer";
import LandingPage from "./components/LandingPage/LandingPage";
import ApplianceRepair from "./components/ApplianceRepair/ApplianceRepair";
import ContactUs from "./components/ContactUs/ContactUs";
import QuotationForm from "./components/QuotationForm/QuotationForm";
import "@fortawesome/fontawesome-free/css/all.min.css";
import "bootstrap-css-only/css/bootstrap.min.css";
import "mdbreact/dist/css/mdb.css";
const store = createStore(
rootReducer,window.__Redux_DEVTOOLS_EXTENSION__ && window.__Redux_DEVTOOLS_EXTENSION__()
);
<React.StrictMode>
<Provider store={store}>
<Router>
<NavBar />
<Switch>
<Route path="/" exact component={LandingPage} />
<Route path="/appliance" exact component={Appliance} />
<Route path="/quotation" exact component={Quotation} />
<Route path="/contact" exact component={Contact} />
</Switch>
<Footer />
</Router>
</Provider>
</React.StrictMode>
我的登录页面显示了剩余的促销时间。 
import React from 'react';
import ReactDom from 'react-dom';
import styles from "./LandingPage.module.css";
//children just for random code
export default function Modal({ open,children,onClose}){
if (!open) return null
const myArray = [
"1234","5678","91011","12134","abcde","efghi","jklm01","12klm0","44slb02"
];
let randomItem = myArray[Math.floor(Math.random()*myArray.length)];
return ReactDom.createPortal(
<>
<div className={styles.modal}>
<button onClick={onClose}>x</button>
{children}
<div>{randomItem}</div>
</div>
</>,document.getElementById('portal')
)
}
这是我的LandingPage组件 LandingPage.js
import React,{ useEffect,useRef,useState } from "react";
import styles from "./LandingPage.module.css";
import Modal from "./Modal";
const LandingPage = () => {
// set time where to start before load
const [timeD,setDays] = useState ('00');
const [timeH,setHours] = useState ('00');
const [timeM,setMinutes] = useState ('00');
const [timeS,setSeconds] = useState ('00');
// useref doesn't cause a component to re-update when it gets changed. Returns object
var period = useRef ();
//create function StartTimer that's going to call our timer
const startTimer = () => {
//set Date to count from
const countdownDate = new Date('September 28,2020 00:00:00').getTime();
// function that calls new "Now" every 1000ms =1sec
period = setInterval(() => {
// build-in method that returns a current time
const Now = new Date().getTime();
// set date minus current give us time remaining
const distance = countdownDate - Now;
// logic found on w3school see(citation)
const days = Math.floor(distance / (1000*60*60*24));
const hours = Math.floor((distance % (1000*60*60*24)/(1000*60*60)));
const minutes = Math.floor((distance % (1000*60*60)) / (1000*60));
const seconds = Math.floor((distance % (1000*60)) / 1000);
//use clearInterval to stop the timer
if (distance < 0)
{
clearInterval(period.current);
}
//if clock still ticking then assign new values to our hooks
else {
setDays(days);
setHours(hours);
setMinutes(minutes);
setSeconds(seconds);
}
},1000);
};
// Now call our method startTimer and return clearInterval function
useEffect(() => {
startTimer();
return () => {
clearInterval(period.current);
};
})
const BUTTON = {
position: 'relative',zIndex:1
}
const [isOpen,setIsOpen] = useState(false)
return (
<section className={styles.timerContainer}>
<section className={styles.timer}>
<div>
<span className={styles.percentIcon}></span>
<h2>CountDown Timer 300 <i className="fas fa-percent"> OFF</i> </h2>
<p>Coupon expire date</p>
</div>
<div id={styles.timerElements}>
<section className={styles.elementsHeight}>
<p>{timeD}</p>
<p><small>Days</small></p>
</section>
<span>:</span>
<section>
<p>{timeH}</p>
<p><small>Hour</small></p>
</section>
<span>:</span>
<section>
<p>{timeM}</p>
<p><small>Min</small></p>
</section>
<span>:</span>
<section>
<p>{timeS}</p>
<p><small>Sec</small></p>
</section>
</div>
<section style={BUTTON}>
<button onClick={() => setIsOpen(true)} className={styles.btn}> Get Promotion Code
<i className="fas fa-tags"></i>
</button>
<Modal id="modal" open={isOpen} onClose={()=> setIsOpen(false)}>
Random string From pre-set Array:
</Modal>
</section>
</section>
</section>
);
};
export default LandingPage;
这是我的 LandingPage.module.css 文件，如果有人想尝试
@font-face {
font-family: "Roboto_Mono";
src: url("../../fonts/Roboto_Mono/RobotoMono-Italic-
VariableFont_wght.ttf");
src: url("../../fonts/Roboto_Mono/RobotoMono-VariableFont_wght.ttf")
format("truetype");
font-weight: normal;
font-style: normal;
}
body {
font-family: "Courier New","Courier","sans-serif";
font-size: 100;
}
.timerContainer {
background-image: url("../../img/landing/fire-log.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
color: rgb(245,239,239);
width: 100vw;
height: 100vh;
}
.timer {
background-color: rgba(240,235,0.5);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-bottom: 7em;
padding-top: 2em;
width: 100%;
height: 100%;
}
#timerElements {
align-content: center;
font-size: large;
/* combined css */
border: 1px solid #fff;
border-radius: 3px;
display: grid;
grid-template-columns: repeat(7,1fr);
align-items: center;
margin-top: 3rem;
padding: 1rem;
text-align: center;
}
.timer div:first-child {
text-align: center;
/* border: 3px; */
}
.btn {
font-family: "Roboto_Mono","Courier New","sans-serif";
font-weight: 600;
margin-top: 0.5em;
padding: 0.5em;
}
.elementsHeight {
border: solid 1px #555;
background-color: chocolate;
Box-shadow: 10px -10px 5px rgba(0,0.6);
-moz-Box-shadow: 10px -10px 5px rgba(0,0.6);
-webkit-Box-shadow: 10px -10px 5px rgba(0,0.6);
-o-Box-shadow: 10px -10px 5px rgba(0,0.6);
border-radius: 15px;
width: 10vw;
}
section > div:nth-child(2) > section:nth-child(3) {
border: solid 1px #555;
background-color: chocolate;
Box-shadow: 10px -10px 5px rgba(0,0.6);
border-radius: 15px;
}
section > div:nth-child(2) > section:nth-child(5) {
border: solid 1px #555;
background-color: chocolate;
Box-shadow: 10px -10px 5px rgba(0,0.6);
border-radius: 15px;
}
section > div:nth-child(2) > section:nth-child(7) {
border: solid 1px #555;
background-color: chocolate;
Box-shadow: 10px -10px 5px rgba(0,0.6);
border-radius: 15px;
}
section p:first-child,#timerElements span {
font-family: "Roboto_mono","sans-serif";
font-size: 100%;
margin-top: 0.5rem;
margin-bottom: 0.1rem;
}
.modal {
display: flex;
flex-wrap: wrap;
position:fixed;
top: 50%;
left: 37%;
background-color: rgb(228,74,233);
padding: 50px;
z-Index: 1000;
}
有人知道如何解决吗？
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）