#reactjs #react-hooks
#reactjs #реагирующие крючки
Вопрос:
Я изучаю react, и я нахожусь на промежуточном уровне или, по крайней мере, я думаю, что пытаюсь реализовать эту книжную штуковину, которая предоставляется:
import HTMLFlipBook from "react-pageflip";
Я пытался преобразовать это в функциональный компонент, но все закончилось меланхолично, я не смог, может быть, потому что я ничего не знаю о компонентах на основе классов, и мне тоже не хочется это изучать, поскольку я уже знаю функциональные компоненты.
const PageCover = React.forwardRef((props, ref) => {
return (
<div className="page page-cover" ref={ref} data-density="hard">
<div className="page-content">
<h2>{props.children}</h2>
</div>
</div>
);
});
const Page = React.forwardRef((props, ref) => {
return (
<div className="page" ref={ref}>
<div className="page-content">
<h2 className="page-header">Page header - {props.number}</h2>
<div className="page-image"></div>
<div className="page-text">{props.children}</div>
<div className="page-footer">{props.number 1}</div>
</div>
</div>
);
});
class DemoBook extends React.Component {
constructor(props) {
super(props);
this.state = {
page: 0,
totalPage: 0,
};
}
nextButtonClick = () => {
this.flipBook.getPageFlip().flipNext();
};
prevButtonClick = () => {
this.flipBook.getPageFlip().flipPrev();
};
onPage = (e) => {
this.setState({
page: e.data,
});
};
componentDidMount() {
this.setState({
totalPage: this.flipBook.getPageFlip().getPageCount(),
});
}
render() {
return (
<div>
<HTMLFlipBook
width={550}
height={733}
size="stretch"
minWidth={315}
maxWidth={1000}
minHeight={400}
maxHeight={1533}
maxShadowOpacity={0.5}
showCover={true}
mobileScrollSupport={true}
onFlip={this.onPage}
onChangeOrientation={this.onChangeOrientation}
onChangeState={this.onChangeState}
className="demo-book"
ref={(el) => (this.flipBook = el)}
>
<PageCover>BOOK TITLE</PageCover>
<Page number={1}>Lorem ipsum...</Page>
<Page number={2}>Lorem ipsum...</Page>
/*...*/
<PageCover>THE END</PageCover>
</HTMLFlipBook>
<div className="container">
<div>
<button type="button" onClick={this.prevButtonClick}>
Previous page
</button>
[<span>{this.state.page}</span> of
<span>{this.state.totalPage}</span>]
<button type="button" onClick={this.nextButtonClick}>
Next page
</button>
</div>
<div>
State: <i>{this.state.state}</i>, orientation: <i>{this.state.orientation}</i>
</div>
</div>
</div>
);
}
}
Может кто-нибудь помочь мне достичь той же функциональности, используя хуки и функциональные компоненты. Пожалуйста
Комментарии:
1. Работает ли этот фрагмент? Пожалуйста, опубликуйте полный код, который вы пробовали и который работает с компонентами на основе классов
2. @DILEEPTHOMAS nodlik.github.io/react-pageflip и нажмите на показать источники, например
3. Я проверил исходный код, он не совпадает с тем, где вы можете увидеть рабочий пример. Вы пробовали это
4. Я попытался преобразовать данный код в функциональные компоненты и попытался сделать это, но не смог, потратил несколько часов, чтобы исправить их, но опять же, я не смог
5. @DILEEPTHOMAS знаете ли вы какие-либо другие компоненты react, которые дают мне функциональность книг? страница переворачивается и все
Ответ №1:
Я не уверен, понял ли я, что вы имели в виду.Но чтобы превратить его в функциональный компонент, я думаю, это можно сделать…
import React, { useState, useEffect } from 'react';
function DemoBook () {
const [page, setPage] = useState(0);
const [totalPage, setTotalPage] = useState(0);
useEffect(() => {
setTotalPage(this.flipBook.getPageFlip().getPageCount())
});
const nextButtonClick = () => {
this.flipBook.getPageFlip().flipNext();
};
const prevButtonClick = () => {
this.flipBook.getPageFlip().flipPrev();
};
const onPage = (e) => {
setPage(e.data)
};
return (
<div>
<HTMLFlipBook
width={550}
height={733}
size="stretch"
minWidth={315}
maxWidth={1000}
minHeight={400}
maxHeight={1533}
maxShadowOpacity={0.5}
showCover={true}
mobileScrollSupport={true}
onFlip={onPage}
onChangeOrientation={this.onChangeOrientation}
onChangeState={this.onChangeState}
className="demo-book"
ref={(el) => (this.flipBook = el)}
>
<PageCover>BOOK TITLE</PageCover>
<Page number={1}>Lorem ipsum...</Page>
<Page number={2}>Lorem ipsum...</Page>
/*...*/
<PageCover>THE END</PageCover>
</HTMLFlipBook>
<div className="container">
<div>
<button type="button" onClick={prevButtonClick}>
Previous page
</button>
[<span>{this.state.page}</span> of
<span>{this.state.totalPage}</span>]
<button type="button" onClick={nextButtonClick}>
Next page
</button>
</div>
<div>
State: <i>{this.state.state}</i>, orientation: <i>{this.state.orientation}</i>
</div>
</div>
</div>
);
};
export default App;