如何在reactjs中将特定div设置为全屏（全窗口大小）

我正在用ReactJs制作一个图像查看器，因为我是这方面的新手，所以我陷入了困境。实际上，我必须添加一个全屏选项。当用户点击任何特定的图像时，图像是打开的，并且有一个选项，如next、prev、close、rotate和FullScreen，该选项需要浏览器的高度和宽度，因此当用户点击全屏时，该特定的图像将获得完整的窗口大小，并且用户仍然有一个选项，如rotate、next.close和prev。我寻找了这么多的解决办法，但都没有奏效

我尝试了很多东西，但它只会全屏显示整个身体，但我希望.center图像可以全屏显示，并提供我所说的选项。这是勇敢的模态成分

class GalleryModal extends React.Component {
        constructor(props) {
          super(props);

          this.state = {
            rotation: 0
          };
          this.rotate = this.rotate.bind(this);
        }

        render() {
          const { rotation } = this.state;
          if (this.props.isOpen === false) {
            return null;
          }

          return (
            <div className="modal-overlay" name={this.props.name}>
              <div className="modal-body">
                <a href="#" className="button" onClick={() => this.rotate()}>
                  <i className="fas fa-sync-alt" />
                </a>
                <a href="#" className="button" onClick={this.props.onPrev}>
                  <i className="fas fa-angle-left" />
                </a>
                <img
                  className="center_image"
                  id="image"
                  src={this.props.src}
                  style={{ transform: `rotate(${rotation}deg)` }}
                />
                <a href="#" className="button" onClick={this.props.onNext}>
                  <i className="fas fa-angle-right" />
                </a>
                <a
                  className="modal-close"
                  href="#"
                  onClick={this.props.onClick}
                >
                  <span className="fa fa-times" />
                </a>
              </div>
            </div>
          );
        }
        rotate() {
          let newRotation = this.state.rotation + 90;
          if (newRotation >= 360) {
            newRotation = -360;
          }
          this.setState({
            rotation: newRotation
          });
        }
      }

---

这是我的代码，我不知道如何添加全屏选项以及在哪里添加它

我建议使用css视口单位，将组件设置为高度：100vh和宽度：100vw将使其全屏显示。然后根据您希望组件全屏显示的时间有条件地呈现组件。

必须使用一些css技巧，但我相信这就是您希望实现的目标。图像居中，占据窗口内可用的最大宽度；但是，如果拉伸窗口，它将向上调整其宽度，直到达到其最大宽度。不建议将其拉伸到其最大值之外，否则，将得到像素化

通过将状态和类方法提升到单个容器，以及使用setState更有效地管理状态，我确实简化了您的代码？true：替换简单的if/else条件语句时为false

工作示例：

容器/Gallery/Gallery.js

---

基本上我想要这个图像。点击那个按钮，中间的图像就可以得到整个窗口的大小。请看这个小提琴。。。。我在上面花了一个多月的时间，所以请大家帮帮忙。Josh刚刚给了你问题的解决方案@Ayushrivastavai我真的很抱歉@JasperLichte因为我对reactJS不太了解我是初学者，我知道如果我给任何元素100vh和100vw，它将需要全屏而不是窗口大小，但我被卡住了，我怎么能做到这一点特定div全浏览器高度和宽度？@Ayushrivastava我有点不理解你的问题。只需将className/id添加到所需的div中，并在css文件中调整其大小。或者，为你的div分配一个风格道具。就像你在vanilla JS reallyNow中所做的那样，你问的是一个完全不同的问题。如果有帮助，请接受我的回答，然后为你的新问题提出一个新问题。对一个问题保留一个问题有助于其他人解决您的原始问题。实际上，在看到您的解决方案之前，我自己尝试了所有的事情，但出现了一个错误，例如，当我单击任何图像并旋转它并关闭它时，然后如果打开其他图像，它将使用上一个旋转值，但它必须为零。这是我尝试的，当你点击全屏图标时，它将全屏显示图像。但是我不知道旋转误差是从哪里来的，你能告诉我我做错了什么吗@马塔卡洛塔

import React from "react";
import GalleryImages from "../../components/GalleryImages/galleryImages";
import GalleryModal from "../../components/GalleryModal/galleryModal";

const imgUrls = [
  "https://source.unsplash.com/3Z70SDuYs5g/800x600",
  "https://source.unsplash.com/01vFmYAOqQ0/800x600",
  "https://source.unsplash.com/2Bjq3A7rGn4/800x600",
  "https://source.unsplash.com/t20pc32VbrU/800x600",
  "https://source.unsplash.com/pHANr-CpbYM/800x600",
  "https://source.unsplash.com/3PmwYw2uErY/800x600",
  "https://source.unsplash.com/uOi3lg8fGl4/800x600",
  "https://source.unsplash.com/CwkiN6_qpDI/800x600",
  "https://source.unsplash.com/9O1oQ9SzQZQ/800x600",
  "https://source.unsplash.com/E4944K_4SvI/800x600",
  "https://source.unsplash.com/-hI5dX2ObAs/800x600",
  "https://source.unsplash.com/vZlTg_McCDo/800x600"
];

export default class Gallery extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      imgIndex: 0,
      imgUrlLength: imgUrls.length,
      showModal: false,
      rotation: 0
    };

    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
    this.nextClick = this.nextClick.bind(this);
    this.prevClick = this.prevClick.bind(this);
    this.rotateImage = this.rotateImage.bind(this);
  }

  openModal(index) {
    this.setState({
      showModal: true,
      imgIndex: index
    });
  }

  closeModal() {
    this.setState({
      showModal: false,
      imgIndex: 0,
      rotation: 0
    });
  }

  nextClick() {
    this.setState(prevState => {
      return {
        imgIndex:
          prevState.imgIndex === prevState.imgUrlLength - 1
            ? 0
            : prevState.imgIndex + 1
      };
    });
  }

  prevClick() {
    this.setState(prevState => {
      return {
        imgIndex:
          prevState.imgIndex === 0
            ? prevState.imgUrlLength - 1
            : prevState.imgIndex - 1
      };
    });
  }

  rotateImage() {
    this.setState(prevState => {
      return {
        rotation: prevState.rotation + 90 <= 270 ? prevState.rotation + 90 : 0
      };
    });
  }

  render() {
    return (
      <div className="container-fluid gallery-container">
        <GalleryImages imgUrls={imgUrls} openModal={this.openModal} />
        <GalleryModal
          isOpen={this.state.showModal}
          onClick={this.closeModal}
          onNext={this.nextClick}
          onPrev={this.prevClick}
          rotateImage={this.rotateImage}
          rotation={this.state.rotation}
          src={imgUrls[this.state.imgIndex]}
        />
      </div>
    );
  }
}

import React from "react";
import PropTypes from "prop-types";

const GalleryImages = ({ imgUrls, openModal }) => {
  return (
    <div className="row">
      {imgUrls.map((url, index) => {
        return (
          <div key={index} className="col-sm-6 col-md-3 col-xl-2">
            <div className="gallery-card">
              <img
                key={index}
                className="gallery-thumbnail"
                src={url}
                alt={`Image number ${index + 1}`}
              />

              <span
                className="card-icon-open fa fa-expand"
                onClick={() => openModal(index)}
              />
            </div>
          </div>
        );
      })}
    </div>
  );
};

GalleryImages.propTypes = {
  imgUrls: PropTypes.arrayOf(PropTypes.string).isRequired,
  openModal: PropTypes.func.isRequired
};

export default GalleryImages;

import React from "react";
import PropTypes from "prop-types";

const GalleryModal = ({
  isOpen,
  onClick,
  onNext,
  onPrev,
  rotateImage,
  rotation,
  src
}) => {
  return isOpen ? (
    <div className="modal-overlay">
      <div className="modal-body">
        <div className="close-modal">
          <a className="modal-close" href="#" onClick={onClick}>
            <span className="fa fa-times" />
          </a>
        </div>
        <div className="rotate-container">
          <a href="#" className="button" onClick={rotateImage}>
            <i style={{ fontSize: 44 }} className="fas fa-sync-alt" />
          </a>
        </div>
        <div className="image-container">
          <div>
            <a href="#" className="button" onClick={onPrev}>
              <i className="fas fa-angle-left" />
            </a>
          </div>
          <div>
            <img
              src={src}
              style={{ transform: `rotate(${rotation}deg)`, width: "100%" }}
            />
          </div>
          <div>
            <a href="#" className="button" onClick={onNext}>
              <i className="fas fa-angle-right" />
            </a>
          </div>
        </div>
      </div>
    </div>
  ) : null;
};

GalleryModal.propTypes = {
  isOpen: PropTypes.bool.isRequired,
  onClick: PropTypes.func.isRequired,
  onNext: PropTypes.func.isRequired,
  onPrev: PropTypes.func.isRequired,
  rotateImage: PropTypes.func.isRequired,
  rotation: PropTypes.number.isRequired,
  src: PropTypes.string
};

export default GalleryModal;

html,
body {
  min-height: 100%;
  height: 100%;
}
html {
  font-size: 16px;
}
body {
  position: relative;
  font-size: 100%;
}
.button {
  font-size: 50px;
  color: #eee;
  margin: 5px;
}
.card-icon-open {
  display: block;
  position: relative;
  left: 45%;
  top: 35px;
  font-size: 30px;
  width: 30px;
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transform: translate(0%, -400%);
  transition: all 0.25s ease-in-out;
}
.card-icon-open:focus,
.card-icon-open:hover {
  color: #111;
}
.close-modal {
  position: fixed;
  top: 0;
  right: 5px;
}
.fullscreen {
  position: relative;
  text-decoration: none;
  font-size: 25px;
  color: #eee;
  z-index: 999;
}
.fullscreen:hover,
.fullscreen:focus,
.fullscreen:blur {
  text-decoration: none;
  color: red;
}
.gallery-container {
  padding-top: 10px;
}
.gallery-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
}
.gallery-thumbnail {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}
.gallery-thumbnail:focus ~ .card-icon-open,
.gallery-thumbnail:hover ~ .card-icon-open,
.gallery-thumbnail ~ .card-icon-open:focus,
.gallery-thumbnail ~ .card-icon-open:hover {
  opacity: 1;
}
.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.image-rotate {
  font-size: 44px;
}
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background: rgba(21, 21, 21, 0.75);
}
.modal-body {
  position: relative;
  top: 15%;
  z-index: 11;
  padding: 0;
  overflow: hidden;
  max-width: 100%;
  max-height: 100%;
}
.modal-close {
  font-size: 44px;
  z-index: 99;
  color: #eee;
  transition: all 0.25s ease-in-out;
}
.modal-close:focus,
.modal-close:hover {
  color: red;
}
.rotate-container {
  font-size: 44px;
  position: fixed;
  top: 0;
  left: 5px;
}