NextJS/React集成TomTom SearchBox组件渲染报错求助

问题核心：getSearchBoxHTML()返回的是原生HTMLDivElement对象，而React的JSX无法直接渲染这类DOM对象，只能渲染React元素、字符串、数字等合法类型，所以才会抛出Objects are not valid as a React child的错误。

正确实现方式 #

这类依赖原生DOM操作的插件，需要通过React的ref获取真实DOM节点，再手动将插件生成的DOM挂载到节点中，同时要处理组件生命周期的清理逻辑：

1. 先确保引入必要依赖：

npm install @tomtom-international/web-sdk-core @tomtom-international/web-sdk-plugin-searchbox

2. 修正后的组件代码：

import { useEffect, useRef } from 'react';
import tt from '@tomtom-international/web-sdk-core';
import { SearchBox } from '@tomtom-international/web-sdk-plugin-searchbox';

function TomTom() {
  // 创建ref用于挂载搜索框的容器
  const searchContainerRef = useRef(null);
  // 保存SearchBox实例，用于卸载时销毁
  const searchBoxRef = useRef(null);

  useEffect(() => {
    if (!searchContainerRef.current) return;

    // 初始化TomTom服务
    const services = {
      search: tt.services.search,
      autocomplete: tt.services.autocomplete
    };

    const options = {
      searchOptions: {
        key: "你的API密钥",
        language: "en-GB",
        limit: 5,
      },
      autocompleteOptions: {
        key: "你的API密钥",
        language: "en-GB",
      },
    };

    // 创建SearchBox实例
    const ttSearchBox = new SearchBox(services, options);
    searchBoxRef.current = ttSearchBox;

    // 获取插件生成的DOM元素，挂载到ref对应的容器中
    const searchBoxHTML = ttSearchBox.getSearchBoxHTML();
    searchContainerRef.current.appendChild(searchBoxHTML);

    // 组件卸载时销毁SearchBox实例，清理事件和DOM
    return () => {
      if (searchBoxRef.current) {
        searchBoxRef.current.destroy();
      }
    };
  }, []); // 空依赖数组确保只在组件挂载时执行一次

  return (
    <div className="App border-2 border-gray-900 w-[200px] h-[100px] m-[20px]">
      {/* 用于挂载搜索框的容器 */}
      <div ref={searchContainerRef}></div>
    </div>
  );
}

export default TomTom;

关键说明 #

• useRef：用来获取真实的DOM容器节点，以及保存SearchBox实例，方便后续销毁。
• useEffect：在组件挂载完成后初始化插件，避免在组件未挂载时操作DOM；返回的清理函数会在组件卸载时销毁SearchBox实例，防止内存泄漏和残留事件监听。
• appendChild：将插件生成的原生DOM元素添加到React管理的容器节点中，这是原生DOM操作的正确方式，而非直接在JSX中渲染DOM对象。

内容的提问来源于stack exchange，提问作者Marek Marszałek