React-fullscreen不工作：goFull方法没有被触发。

Question

我有一个 AdminNavbar Component 其中包含了顶部水平导航条的所有内容。这个 AdminNavbar Component 然后导入到 Admin Layout. 我正在使用 这个反应库 以达到 on click full-screen functionality.

AdminNavbar Component 有按钮。onClick 其中，它将触发一个 goFull() 方法和 Admin Layout我已经把所有的JSX都封装在里面了。<FullScreen></FullScreen>

问题是 goFull() 没有被触发，我不知道该如何解决这个问题。

代码为 AdminNavbar组件

import React from "react";
//  reactstrap components
import { Navbar, NavbarBrand, 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">
            <NavbarBrand href="#">{this.props.brandText}</NavbarBrand>

            <button className="btn-fullscreen" onClick={this.goFull}>
              <i className="fa fa-expand-arrows-alt"></i>
            </button>
          </div>
        </Container>
      </Navbar>
    );
  }
}

导出默认的AdminNavbar。

管理布局的代码

import React from "react";
// core components
import AdminNavbar from "components/Menu/AdminNavbar.js";

import routes from "routes/routes.js";

import Fullscreen from "react-full-screen";

var ps;

class Admin extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeColor: "primary",
      sidebarMini: true,
      opacity: 0,
      sidebarOpened: false,
      isFfull: false,
    };
  }

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

export default Admin;

Answer 1

嗯...

问题是在传递道具从 管理员 组成部分 管理栏 组件。

现在，根据我的理解，你的按钮在 管理导航条 无法识别方法 goFull().

而且还有一个错别字 状况 isFfull 应是 isFull

请做以下修改，就可以了。

在 管理员

    import React from "react";
    // core components
    import AdminNavbar from "components/Menu/AdminNavbar.js";

    import routes from "routes/routes.js";

    import Fullscreen from "react-full-screen";

    var ps;

    class Admin extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          activeColor: "primary",
          sidebarMini: true,
          opacity: 0,
          sidebarOpened: false,
          isFull: false,
        };
      }

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

    export default Admin;

在 管理栏

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

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

  render() {
    return (
    <Navbar className="navbar" expand="lg">
    <Container fluid>
      <div className="navbar-wrapper">
        <NavbarBrand href="#">{this.props.brandText}</NavbarBrand>

        <button className="btn-fullscreen" onClick={this.props.goFull}>
          <i className="fa fa-expand-arrows-alt"></i>
        </button>
      </div>
    </Container>
  </Navbar>
 );
 }
}
export default AdminNavbar;