使用样式化组件时在 React 中单击时更改 CSS 属性

Question

我正在用 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 class="content-container">
        <button id="button1" class="button" >Button 1</button>
    </div>

    <div id="modal" class="modalpopup">
        <div class="modal-content">
            //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 中的所有内容。

如果您对此有任何回应，我将不胜感激，谢谢。

Answer 1

在 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。

Answer 2

styled-component 是 React 组件，因此您可以将 props 传递给它们。我建议将isClicked（或类似）状态添加到InfoCalon 组件，并从附加到按钮的单击处理程序中更新它。将 isClicked 值作为 prop 传递给 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 函数访问isClicked prop 并相应地设置显示规则。

const CustomStyle = styled.div`
  ...

  .modalpopup {
    display: ${({ isClicked }) => isClicked ? "block" : "none"};
    ...
  }

  ...
`;

改进的设计可能是将所有 CSS 分解为几个单独的样式组件，每个组件都可以使用自己的道具。例如，您可以将模态 div 设为自己的组件，并直接将 isOpen 属性传递给它以设置样式。

例子

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>
  )
}