Open ghost opened 4 years ago
Yes it is partially supported. But the children must be of the same type. Like here:
Also, please update StPageFlip to the latest version (0.4.3)
If you put a button next to it that will perform setPages and insert the original array (for example), then there will be the same error as the author of the question
I dug around in the code and it's caused by the library wrapping the pages into several other inner elements. React thinks the pages are the children of the div rendered in the HTMLFlipbook component but actually they are under the stf_wrapper and stf_block elements.
Unfortunately this is how far I've gotten. I don't know how to delete pages from the book though it would be important for some use cases. I might just move to vanilla JS though I started with React in the hope of easier DOM management.
Try using the latest version. I hope I fixed it
It looks like it's working now, I can add&remove pages without errors (though I am new to both React and Hooks and didn't know if I could make the changed HTMLFlipBook work in my class component so I spent a whole afternoon migrating to Hooks).
Thanks for the quick reply!
Hi.
I also catch this error in version 2.0.3, but my scenario slightly harder. I can remove and add pages without any problems, but when I try to remove and add pages at the same time the problem reproduced. It needed when the book has restrictions with blanc pages at the start and the end of the book. For example, I have restrictions:
If I understand correctly it happened, because the count of pages doesn't change https://github.com/Nodlik/react-pageflip/blob/master/src/html-flip-book/index.tsx#L65 and method refreshOnPageDelete() doesn't call.
Do you have any ideas How I/We can fix it? I have only 2 ideas: 1) Automatical handling. The library will check is the count of pages is odd and is it add the blank page before back cover 2) Add property renderForcePagesChange or something like this
// something like this
if (!props.renderOnlyPageLengthChange || props.renderForcePagesChange || pages.length !== childList.length) {
if (childList.length < pages.length || props.renderForcePagesChange) {
refreshOnPageDelete();
}
setPages(childList);
}
@Nodlik What do you think about it? I can prepare the pull request.
Thanks