使用样式化组件时在 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>)}

并且您还需要从模式的样式中删除 显示：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>
  )
}

使用道具函数访问 isClicked 道具并相应地设置显示规则。

const CustomStyle = styled.div`
  ...

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

  ...
`;

一种改进的设计可能是将所有 CSS 分解为多个 div 相同的样式组件，每个组件都可以使用自己的道具。例如，您可以将模态 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>
  )
}

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

Changing CSS Attribute on click in React while using Styled Components

html

javascript

css

reactjs

styled-components