在函数中使用赋值将带连字符的"-"属性添加到标记时出现问题

Question

我使用此函数动态创建用户选择数量的输入组：

const tag = (tag, className, props = {}) => 
Object.assign(document.createElement(tag), {className, ...props});

一切都很好，除非我打了一个有连字符字段的调用，比如tag("div", "collapse", {id: "card" + cardCount, data-parent: "#parentList"}))

它在"data parent"属性上给了我一个错误。我把它换成了[数据租金]，但仍然有一个错误。我该如何让它发挥作用？

Answer 1

您需要在'data-parent'周围添加引号

tag("div", "collapse", {id: "card" + cardCount, 'data-parent': "#parentList"})

p.S.

你可以在这里找到文档

更新

这里不应该使用Object.assign()，因为它的主要目的是修改对象，而document.createElement()返回一个DOM元素，该元素提供setAttibute方法为其添加属性。

所以tag应该写成：

const tag = (tag, className, props = {}) => {
const el = document.createElement(tag);
el.className = className;
Object.keys(props).forEach(
key => el.setAttribute(key, props[key])
);
return el;
}
...
tag("div", "collapse", {id: "card" + cardCount, 'data-parent': "#parentList"})