我正在用 HTML、CSS 和純 JS 制作網頁。我打算將其轉換為 ReactJS。雖然，我計劃將其制作成單個 JSX 檔案以將其匯出到 App.js。我的朋友推薦我使用 Styled Components，這樣我就可以將所有這些都整合到一個 JSX 檔案中。
問題是，我有一個按鈕，在單擊時顯示一個模態框，使用純 JS 中的函式。目前，我無法在 ReactJS 上實作該功能。
我在 React 中的代碼看起來有點像這樣：
//The Exported page
import React, {useState} from "react";
import styled from "styled-components";
export function InfoCalon(){
return(
<CustomStyle>
<div >
<button id="button1" >Button 1</button>
</div>
<div id="modal" >
<div >
//Modal Contents
</div>
</div>
</CustomStyle>
)
}
const CustomStyle = styled.div`
background-color: black;
color: white;
.button {
border: none;
min-width: 30%;
height: auto;
display: inline-flexbox;
text-align: center;
text-decoration: none;
margin: 10px 10% 10px 10%;
transition-duration: 0.2s;
cursor: pointer;
}
.button:hover{
transform: scale(1.02);
}
.button:active{
transform: scale(0.97);
transition-duration: 0.05s;
}
.modalpopup {
display: none; //The attribute that I want to change on button1 click to display: block.
position: fixed;
z-index: 10;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #102037;
margin: 7% auto;
position: relative;
padding: 1% 3% 3% 3%;
width: 80%;
}
`
我嘗試在按鈕中使用 onClick 并制作了一個顯示模態的函式，但我總是失敗，出現諸如“var is null()”之類的錯誤。
在轉換為 ReactJS 之前，JS 檔案中的代碼是：
var btn1 = document.getElementById("button1");
btn1.onclick = function() {
modal.style.display = "block";
}
對于 HTML 和 CSS 代碼，它幾乎是 CustomStyle 中的所有內容。
我將不勝感激對此的任何回應，謝謝。
uj5u.com熱心網友回復：
在 InfoCalon 組件中，您可以維護一個定義模態是否打開的內部狀態
const [isOpen, setIsOpen] = useState(false);
現在要切換它，您需要像這樣將事件偵聽器附加到按鈕
<button id="button1" onClick={(e) => setIsOpen(!isIsOpen)} class="button" >Button 1</button>
現在您需要做的就是有條件地渲染模態，即僅在 isOpen 為真時才顯示模態。
{isOpen && (<div id="modal" class="modalpopup">
<div class="modal-content">
//Modal Contents
</div>
</div>)}
而且您還需要從模態的樣式中洗掉display: none。
uj5u.com熱心網友回復：
styled-component是 React 組件，因此您可以將 props 傳遞給它們。我建議向組件添加一個isClicked（或類似的）狀態，InfoCalon并從附加到按鈕的點擊處理程式更新它。將isClicked值作為道具傳遞給CustomStyle組件。
export function InfoCalon() {
const [isClicked, setIsClicked] = React.useState(false);
const clickHandler = () => setIsClicked(clicked => !clicked);
return(
<CustomStyle isClicked={isClicked}>
<div class="content-container">
<button id="button1" class="button" onClick={clickHandler}>
Button 1
</button>
</div>
<div id="modal" class="modalpopup">
<div class="modal-content">
//Modal Contents
</div>
</div>
</CustomStyle>
)
}
使用 props 函式訪問isClickedprops 并相應地設定顯示規則。
const CustomStyle = styled.div`
...
.modalpopup {
display: ${({ isClicked }) => isClicked ? "block" : "none"};
...
}
...
`;
改進的設計可能是將所有 CSS 分解成幾個單獨的樣式組件，每個組件都可以使用自己的道具。例如，您可以將模態 divisOpen設為自己的組件，并直接向其傳遞一個prop 以設定樣式。
例子
const Modal = styled.div`
display: ${({ isOpen }) => isOpen ? "block" : "none"};
position: fixed;
z-index: 10;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
`;
const ModalContent = styled.div`
background-color: #102037;
margin: 7% auto;
position: relative;
padding: 1% 3% 3% 3%;
width: 80%;
`;
export function InfoCalon() {
const [isOpen, setIsOpen] = React.useState(false);
const toggleModal = () => setIsOpen(open => !open);
return(
<CustomStyle isClicked={isClicked}>
<div class="content-container">
<button id="button1" class="button" onClick={toggleModal}>
Button 1
</button>
</div>
<Modal id="modal">
<ModalContent>
// Modal Contents
</ModalContent>
</Modal>
</CustomStyle>
)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/357353.html
標籤：javascript html css 反应 样式组件