React全屏不工作:goFull方法没有被触发

Question

我有一个AdminNavbar Component，它包含顶部水平导航栏的所有内容。然后将该AdminNavbar Component导入到Admin Layout中。我正在使用这个react库来实现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

问题在于将道具从Admin组件传递到AdminNavbar。

根据我的理解，您在AdminNavBar中的按钮无法识别方法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;

在AdminNavbar中

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;