如何在React中正确渲染LCARS SDK返回的jQuery HTML对象数组

问题根因 #

1. 你获取的domObj是jQuery.fn.init类型的实例集合，jQuery会把原生DOM对象存放在实例的下标属性中，直接解构jQuery对象拿id、className肯定返回undefined。
2. React的虚拟DOM渲染机制不支持直接将原生DOM对象/ jQuery对象作为子元素返回，这是你报错Objects are not valid as a React child的直接原因。

解决方案 #

方案1：ref挂载（推荐，适配你现有LCARS动态操作DOM的需求） #

该方案让React只负责提供挂载容器，jQuery生成的DOM直接插入容器中，你原有的LCARS类名操作方法可以完全保留，不受影响。
代码示例：

import { useRef, useEffect } from 'react';

function YourComponent() {
  const domObj = LCARS.create(nemesisUI).dom;
  // 存储所有挂载容器的ref数组
  const containerRefs = useRef([]);

  useEffect(() => {
    // 组件挂载完成后，将jQuery生成的DOM插入对应容器
    domObj.each((index, nativeEl) => {
      const container = containerRefs.current[index];
      if (container) {
        container.innerHTML = '';
        container.appendChild(nativeEl);
      }
    });
  }, []);
  // 若nemesisUI会动态变化，可将其加入useEffect的依赖数组触发重新渲染

  return (
    <>
      {domObj.map((_, index) => (
        <div 
          key={index}
          ref={el => containerRefs.current[index] = el}
        />
      ))}
    </>
  );
}

方案2：转成React元素渲染（仅适合不需要后续用LCARS操作DOM的场景） #

如果只需要渲染静态内容，不需要后续调用LCARS的类名操作方法，可以直接从jQuery对象中提取原生DOM属性，生成React元素渲染：

return domObj.map((nativeEl, index) => {
  return React.createElement(nativeEl.tagName.toLowerCase(), {
    key: index,
    id: nativeEl.id,
    className: nativeEl.className,
    href: nativeEl.href || undefined
    // 其他需要保留的属性可自行补充
  });
});

注意：该方案生成的是React虚拟DOM，和你之前拿到的jQuery对象无关联，后续调用LCARS的class方法修改类名不会作用到渲染出来的元素上。

原代码错误补充 #

你原有的map回调没有返回JSX元素，就算能正确拿到id和className，也无法正常渲染内容。

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