如何在Backdraft中通过bdAttach向DOM插入Element元素

当你在组件的bdElements方法里为元素设置bdAttach: 'contentGoesHere'后，组件实例会自动将该元素的引用绑定到this.contentGoesHere属性上。你可以通过这个引用，结合DOM原生方法完成元素插入。

实现代码 #

直接在insertContent方法中使用原生DOM的appendChild方法即可：

class Foo extends Component {
    bdElements() {
        return e.div(
            e.div(
                { bdAttach: 'contentGoesHere' }
            ),
        );
    }

    insertContent() {
        const content = e.span('content');
        // 将content插入到目标容器中
        this.contentGoesHere.appendChild(content);
    }
}

补充说明 #

如果你的框架提供了专属的元素插入方法（比如部分Bd相关框架自带的bdAppend方法），也可以替换使用，效果一致：

// 框架专属方法示例（若支持）
this.contentGoesHere.bdAppend(content);

核心逻辑是bdAttach会自动把标记的元素引用挂载到组件实例上，你只需通过实例属性访问目标容器，再执行插入操作即可。

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