在Framework7 React深色主题中使用Preloader组件时遇运行时错误

问题详情 #

• 使用Framework7 React框架，切换到深色主题（如ios dark）时，Preloader组件触发运行时错误：

  Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’. TypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’.

• 浅色主题（md、ios模式）下组件正常工作；用Vite搭建新项目复现问题，将Preloader包裹在div中也无法解决，项目初始化配置已确认无误。

相关代码 #

Splash组件代码

import React from 'react';
import { Page, Preloader } from "framework7-react";

const Splash = () => {
    return (
        <Page>
            <Preloader/>
        </Page>
    );
};

export default Splash;

App.js代码

import './App.css';
import { App, f7ready, View } from "framework7-react";
import Splash from "./Screens/Splash";

function MyApp() {
    f7ready(() => {
    });
    const f7params = {
        name: 'My App',
        routes: [
            {
                path: '/splash',
                component: Splash,
            },
        ],
    };
  return (
      <App theme="ios dark" name="My App" {...f7params}>
          <View main url="/splash" />
      </App>
  );
}

export default MyApp;

index.js代码

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import Framework7 from 'framework7/lite-bundle';
import Framework7React from 'framework7-react';
import 'framework7/css/bundle';

Framework7.use(Framework7React);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

可行解决思路 #

1. 升级Framework7版本
   该错误大概率是框架深色主题下Preloader组件的DOM生成bug，尝试升级到最新稳定版，官方可能已修复此类问题。

2. 显式指定Preloader主题
   手动为Preloader组件指定匹配的深色主题属性，避免框架自动匹配时出错：

   <Preloader theme="ios-dark" />
   

3. 延迟渲染Preloader
   等Framework7主题初始化完成后再挂载Preloader组件，确保DOM环境准备就绪：

   import React, { useState, useEffect } from 'react';
   import { Page, Preloader, f7ready } from "framework7-react";
   
   const Splash = () => {
     const [themeReady, setThemeReady] = useState(false);
   
     useEffect(() => {
       f7ready(() => {
         setThemeReady(true);
       });
     }, []);
   
     return (
       <Page>
         {themeReady && <Preloader />}
       </Page>
     );
   };
   
   export default Splash;
   

4. 使用自定义Preloader
   绕过Framework7的Preloader组件，直接用原生HTML+CSS实现同效果的加载器：

   const Splash = () => {
     return (
       <Page>
         <div className="preloader preloader-ios-dark">
           <div className="preloader-inner">
             <div className="preloader-circle"></div>
             <div className="preloader-circle"></div>
           </div>
         </div>
       </Page>
     );
   };
   

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