ReactReader epub js 技术咨询：页面加载时自动打开目录（TOC）

直接通过组件参数控制 #

ReactReader支持用tocVisible参数直接控制目录的显示状态，初始化时将其设为true，就能实现页面加载完成后自动打开目录：

import ReactReader from "react-reader";

function EpubReader() {
  return (
    <ReactReader
      url="/path/to/your-book.epub"
      tocVisible={true} // 加载时自动显示目录
      showToc={true} // 必须开启该参数，否则目录按钮会被隐藏
    />
  );
}

通过组件实例方法触发 #

如果你的ReactReader版本不支持tocVisible，可以用useRef获取组件实例，调用内部的toggleToc方法来打开目录：

import React, { useEffect, useRef } from "react";
import ReactReader from "react-reader";

function EpubReader() {
  const readerRef = useRef(null);

  useEffect(() => {
    // 组件挂载完成后触发目录打开
    if (readerRef.current) {
      readerRef.current.toggleToc();
    }
  }, []);

  return (
    <ReactReader
      ref={readerRef}
      url="/path/to/your-book.epub"
      showToc={true}
    />
  );
}

注意事项 #

• 确保使用的ReactReader版本在v1.0.0及以上，旧版本可能没有tocVisible和toggleToc这些API
• 必须保留showToc={true}，否则目录的触发元素会被隐藏，上述方法都无法生效

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