reactjs - TypeError:无法设置未定义的属性“FlipPage”
问题描述
所以我正在制作一个使用这个库的网站:https ://github.com/darenju/react-flip-page
该代码要求我使用:```<FlipPage ref={(component) => { this.flipPage = component; }}>````
但是当我使用它时,我得到
TypeError:无法设置未定义的属性“FlipPage”
问:我做错了什么?
代码:
import React, { useState } from "react";
import Container from "react-bootstrap/Container";
import { useHistory } from 'react-router-dom';
import FlipPage from 'react-flip-page';
import "../App.css";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import ProgressBar from "react-bootstrap/ProgressBar";
import Image from "react-bootstrap/Image";
import { Link } from "react-router-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { Navigation, Footer, Home, Quiz, Tasks, Chap, Plus, Subchap } from "../components";
import axios from 'axios';
export default function App(){
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [user, setUser] = useState();
const [c1, setC1] = useState([]);
const [c2, setC2] = useState(true);
axios.get('https://run.mocky.io/v3/d682f1d3-fe57-4c5f-ba74-688f355d4002').then(resp => {
if(c2){
c1.push(resp.data["progress"]["1"]);
c1.push(resp.data["progress"]["2"]);
console.log(c1);
setC2(false);
}
});
return(
<div className="p-3 header">
<FlipPage ref={(component) => { this.flipPage = component; }} orientation="horizontal" width="400%" height="850" >
<article>
<Router>
<Switch>
<Chap />
</Switch>
</Router>
</article>
<article>
<Router>
<Switch>
<Tasks />
</Switch>
</Router>
</article>
<article>
<h1>My excellent third article</h1>
<p>My excellent third content</p>
</article>
</FlipPage>
</div>
);
/*const history = useHistory();
setUser({});
setUsername("");
setPassword("");
localStorage.clear();
let path = `/`;
history.push(path);
window.location.reload();*/
}
解决方案
推荐阅读
- java - RecyclerView 项影响 RecyclerView 外的 TextView 的值
- mysql - MariaDB - 我应该向我的表添加索引吗?
- ruby-on-rails - Rails has_many 通过 where 子句
- python - python beautifulsoup select,如何获取特定值
- c++ - 哪一个更适合存储字符,矢量
还是字符串? - powerbi - Power BI - 列数有限的矩阵
- bonjour - 是否可以让 mDNS / Bonjour 在不同的服务器上发布相同的服务名称
- json - 请求 JSON 文件内容的空 GET 响应 | koa2
- java - 访问 WMTS 服务的 Geotools 抛出 stackoverflow 解析 XML
- postgresql - 无法访问在 docker 入口点文件中创建的 postgres 扩展,直到我在 psql 中手动创建它