React集成EmblaCarousel报Functions are not valid as a React child错误求助

本地安装的embla-carousel-react版本和codesandbox测试环境的版本不兼容，v1.0及以上版本已经废弃了组件式调用方案，改为使用Hook实现，你将Hook当作组件直接渲染就会触发Functions are not valid as a React child报错。

推荐使用新版官方推荐的Hook写法，修正后的完整代码如下：

import React from "react";
import ReactDOM from "react-dom";
// 新版引入useEmblaCarousel Hook
import useEmblaCarousel from "embla-carousel-react";

import "components/partials/Carousel/styles.css";

function App() {
  // 第一个返回值为挂载到轮播容器的ref，第二个为轮播控制API
  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false });

  const prev = () => emblaApi?.scrollPrev();
  const next = () => emblaApi?.scrollNext();

  return (
    <div className="embla">
      <div className="embla__carousel" ref={emblaRef}>
        <div className="embla__container">
          <div className="embla__slide">
            <div className="embla__inner">1</div>
          </div>
          <div className="embla__slide">
            <div className="embla__inner">2</div>
          </div>
          <div className="embla__slide">
            <div className="embla__inner">3</div>
          </div>
          <div className="embla__slide">
            <div className="embla__inner">4</div>
          </div>
        </div>
      </div>
      <button onClick={prev}>上一页</button>
      <button onClick={next}>下一页</button>
    </div>
  );
}

export default App;

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

• 原代码中App函数多了一层多余的嵌套大括号，属于语法错误，已删除
• 原代码中emblaRef、prev、next三个变量未定义就直接调用，已补充对应的逻辑
• 如果你坚持要使用旧版本的组件式写法，可以将embla-carousel-react依赖版本固定为0.6.0，但不推荐，旧版本已经停止维护。

内容的提问来源于stack exchange，提问作者Michael