VUE3，创建和渲染dom元素的问题

cqwcns

需求是先获得页面上的父元素，然后向该父元素添加多个子元素。
首先我尝试这样，即先后添加：

[JavaScript] 纯文本查看 复制代码

const onEditorReady = () => {
  console.log('EditorReady');
  // 获得父元素
  const domEditorToolBar = document.getElementsByClassName('ck-toolbar__items')[0];
  // 创建子元素
  const domBtnA = h('button', { class: 'ck ck-button', onClick: doEditorFullScreen }, 'A');
  const domBtnB = h('button', { class: 'ck ck-button', onClick: doEditorFullScreen }, 'B');
  // 渲染子元素
  render(domBtnA, domEditorToolBar);
  render(domBtnB, domEditorToolBar);
}

存在问题：结果只会渲染出最后一个，即B，A未被渲染出来，不知道什么原因。

然后我尝试嵌套子元素，例如这样：

[JavaScript] 纯文本查看 复制代码

const onEditorReady = () => {
  console.log('EditorReady');
  // 获得父元素
  const domEditorToolBar = document.getElementsByClassName('ck-toolbar__items')[0];
  // 创建子元素
  const domBtnA = h('button', { class: 'ck ck-button', onClick: doEditorFullScreen }, 'A');
  const domBtnB = h('button', { class: 'ck ck-button', onClick: doEditorFullScreen }, 'B');
  // 渲染子元素
  render(h('span', {}, [domBtnA, domBtnB]), domEditorToolBar);
}

存在问题：A和B都被渲染出来了，可见实际上也是渲染了一个span（包含A和B），结构变成了：
<父元素>
   <原有子元素>
   <原有子元素>
   <span>
     <A/>
     <B/>
   </span>
</父元素>

由于加套了一个span会影响元素样式，所以我不能使用第二种方法。


请教各位大佬，这种需求应该怎么写？感谢

bilibini

看一下你的render函数怎么写的

cqwcns

bilibini 发表于 2023-1-18 12:12
看一下你的render函数怎么写的

我用的是直接从vue导出的：

import { ref, h, render } from 'vue';

13604811047

import { Fragment } from "vue";   
render(h(Fragment,[domBtnA, domBtnB] ), domEditorToolBar);

freesaber

把<A/> <B/>，写在一个组件里面，然后用template
<template>
  <A/>
   <B/>
</template>
h(这个组件)

ibilibili

既然用了vue就不要操作dom了。