React中如何重写Patternfly4嵌套组件元素类型解决button嵌套警告

问题根因 #

DualListSelector默认条目容器渲染为<button>元素，TreeView的节点也默认使用<button>做交互载体，HTML规范禁止<button>嵌套，因此触发DOM校验报错。

• 方案1：自定义DualListSelector条目容器，替换默认<button>元素
  PatternFly 4的DualListSelector支持通过renderItem属性自定义条目渲染逻辑，你可以放弃默认生成的<button>容器，改用语义化的<div>模拟按钮交互，从根源避免嵌套button问题：

const customRenderItem = (item, isSelected, onItemSelect) => (
  <div
    role="button"
    tabIndex={0}
    className="pf-c-dual-list-selector__list-item"
    onClick={() => onItemSelect(item)}
    onKeyDown={(e) => {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        onItemSelect(item);
      }
    }}
    aria-selected={isSelected}
  >
    {/* 此处插入你的自定义TreeView组件 */}
    <TreeView {...treeViewProps} />
  </div>
);

补充对应 accessibility 属性后，自定义容器和原有按钮行为完全一致，不会影响DualListSelector的原生交互逻辑。

• 方案2：使用React Portal剥离TreeView的DOM层级
  如果不想修改DualListSelector的原有渲染逻辑，可以把TreeView的内容通过Portal挂载到和DualListSelector同级的DOM节点上，再通过CSS绝对定位把TreeView视觉上固定到原来的条目位置，DOM结构上不会出现嵌套关系：

// 全局提前创建Portal挂载节点
const treePortalRoot = document.getElementById('tree-portal-root') || document.createElement('div');
treePortalRoot.id = 'tree-portal-root';
!document.getElementById('tree-portal-root') && document.body.appendChild(treePortalRoot);

// 自定义DualListSelector条目组件
const TreeItem = ({ treeProps }) => {
  const itemRef = useRef(null);
  const [position, setPosition] = useState({});

  useEffect(() => {
    if (!itemRef.current) return;
    const rect = itemRef.current.getBoundingClientRect();
    setPosition({
      position: 'absolute',
      top: rect.top + window.scrollY,
      left: rect.left + window.scrollX,
      width: rect.width,
      height: rect.height
    });
  }, []);

  return (
    <>
      <div ref={itemRef} className="pf-c-dual-list-selector__list-item-placeholder" />
      {createPortal(
        <div style={position}>
          <TreeView {...treeProps} />
        </div>,
        treePortalRoot
      )}
    </>
  );
};

该方案完全不会修改两个组件的原生渲染逻辑，也不会破坏组件自带的交互和 accessibility 特性。

• 方案3：渲染后动态替换外层<button>标签
  如果前两个方案都不适用，可以在DualListSelector渲染完成后，通过DOM操作把外层的<button>替换成等价的非button元素，把原有事件和属性全部迁移：

useEffect(() => {
  // 匹配DualListSelector条目下的默认button
  const itemBtns = document.querySelectorAll('.pf-c-dual-list-selector__list-item > button');
  itemBtns.forEach(btn => {
    const replacement = document.createElement('div');
    // 复制所有原生属性
    Array.from(btn.attributes).forEach(attr => replacement.setAttribute(attr.name, attr.value));
    // 迁移子元素
    replacement.append(...btn.childNodes);
    btn.parentNode.replaceChild(replacement, btn);
  });
}, [dualListData]); // 依赖项设置为DualListSelector的数据源，数据更新后重新执行替换

该方案属于兜底方案，无需修改组件调用逻辑，适配性更强。

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