NotFoundError：无法在 React with Flickity 上的“节点”上执行“removeChild”

Question

我正在构建一个反应应用程序，在我的主页上，我有组件“CategoriesList”。

当我在主页上时，“类别列表”运行良好，但是当我使用 react-router-dom 导航到 ProductDetails 页面时，我发现了这个错误：

“NotFoundError: 无法在'Node'上执行'removeChild'：要移除的节点不是该节点的子节点。”

'CategoriesList' 使用 Flickty。我试图删除 Flickity，并且......效果很好。但我需要使用 Flickity。

谁能帮帮我？

类别列表组件：

const CategoryList = ({list, popupOpen, refreshProductList}) => {

    return (
        <Container>
            <Slider
                options={{
                    cellAlign: 'center',
                    draggable: true,
                    groupCells: true,
                    contain: false,
                    pageDots: false,
                  }}

                  style={ popupOpen ? ({opacity: 0.05})  : null}
            >
                {list.map((category, index) => ( 
                        <Category key={index}>{category}</Category>
                ))}

            </Slider>
        </Container>
    );
}

Flickty 滑块组件：

import Flickity from 'flickity';
import 'flickity/dist/flickity.min.css';

export default class Slider extends Component {
    constructor(props) {
        super(props);

        this.state = {
          flickityReady: false,
        };

        this.refreshFlickity = this.refreshFlickity.bind(this);
      }

      componentDidMount() {
        this.flickity = new Flickity(this.flickityNode, this.props.options || {});

        this.setState({
          flickityReady: true,
        });
      }

      refreshFlickity() {
        this.flickity.reloadCells();
        this.flickity.resize();
        this.flickity.updateDraggable();
      }

      componentWillUnmount() {
        this.flickity.destroy();
      }

      componentDidUpdate(prevProps, prevState) {
        const flickityDidBecomeActive = !prevState.flickityReady && this.state.flickityReady;
        const childrenDidChange = prevProps.children.length !== this.props.children.length;

        if (flickityDidBecomeActive || childrenDidChange) {
          this.refreshFlickity();
        }
      }

      renderPortal() {
        if (!this.flickityNode) {
          return null;
        }

        const mountNode = this.flickityNode.querySelector('.flickity-slider');

        if (mountNode) {
          return ReactDOM.createPortal(this.props.children, mountNode);
        }
      }

      render() {
        return [
          <div style={this.props.style} className={'test'} key="flickityBase" ref={node => (this.flickityNode = node)} />,
          this.renderPortal(),
        ].filter(Boolean);
      }
}

Answer 1

如果您想将 Flickity 与 React 一起使用，而不是创建自己的组件，我强烈建议您使用 react-flickity-component。它也很容易使用：

提示：如果您在 Flickity 集中使用 wrapAround 选项 disableImagesLoaded prop ture（默认为false）。

import Flickity from 'react-flickity-component'

const flickityOptions = {
    autoPlay: 4000,
    wrapAround: true
}

function Carousel() {
  return (
    <Flickity
      disableImagesLoaded
      options={flickityOptions} // Takes flickity options {}
    >
      <img src="/images/placeholder.png"/>
      <img src="/images/placeholder.png"/>
      <img src="/images/placeholder.png"/>
    </Flickity>
  )
}