Блог

Я использую react-полноэкранную библиотеку.

Ссылка на code sandbox

У меня есть панель навигации, где я разместил JSX для кнопки со значками.

 class AdminNavbar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFfull: false
    };
  }

  render() {
    return (
      <Navbar className="navbar" expand="lg">
        <Container fluid>
          <div className="navbar-wrapper">
            <div className="navbar-minimize d-inline">
              <button className="btn-fullscreen" onClick={this.props.goFull}>
                <i className="fa fa-expand-arrows-alt"></i>
                <i className="fa compress-arrows-alt"></i>
              </button>
            </div>
          </div>
        </Container>
      </Navbar>
    );
  }
}
  

А затем в моем другом Admin Component я использую его в качестве реквизита и выполняю onClick()

 class Admin extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFull: false
    };
  }

  goFull = () => {
    if (document.body.classList.contains("btn-fullscreen")) {
      this.setState({ isFull: true });
    } else {
      this.setState({ isFull: false });
    }
    document.body.classList.toggle("btn-fullscreen");
  };
  render() {
    return (
      <Fullscreen
        enabled={this.state.isFull}
        onChange={(isFull) => this.setState({ isFull })}
      >
        <div className="wrapper">
          <div className="main-panel">
            <AdminNavbar {...this.props} goFull={this.goFull} />
          </div>
        </div>
      </Fullscreen>
    );
  }
} 
  

Проблема: значки не меняются при нажатии кнопки. Я также пытался использовать active класс. но не повезло.

Вам не нужно проверять список классов в теле. Переключение значков может быть достигнуто путем изменения состояния.Пожалуйста, взгляните на код.

 import React from "react";

import AdminNavbar from "./AdminNavbar";

import Fullscreen from "react-full-screen";

class Admin extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFull: false
    };
  }

  goFull = () => {
    this.setState({ isFull: !this.state.isFull });
  };
  render() {
    return (
      <Fullscreen
        enabled={this.state.isFull}
        onChange={(isFull) => this.setState({ isFull })}
      >
        <div className="wrapper">
          <div className="main-panel">
            <AdminNavbar
              {...this.props}
              isFull={this.state.isFull}
              goFull={this.goFull}
            />
          </div>
        </div>
      </Fullscreen>
    );
  }
}

export default Admin;
  

Код панели навигации администратора

 import React from "react";

//  reactstrap components
import { Navbar, Container } from "reactstrap";

class AdminNavbar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFfull: false
    };
  }

  render() {
    return (
      <Navbar className="navbar" expand="lg">
        <Container fluid>
          <div className="navbar-wrapper">
            <div className="navbar-minimize d-inline">
              <button className="btn-fullscreen" onClick={this.props.goFull}>
                {!this.props.isFull ? (
                  <i className="fa fa-expand-arrows-alt"></i>
                ) : (
                  <i className="fa compress-arrows-alt"></i>
                )}
              </button>
            </div>
          </div>
        </Container>
      </Navbar>
    );
  }
}

export default AdminNavbar;