无法设置样式属性值 javascript / typescript

Question

我正在尝试为提供的对象中的元素设置样式。像这样：

function DOMparseChildren(children: any) {
    return children.map((child: any) => {
        if(typeof child === 'string') {
            return document.createTextNode(child);
        }
        return child;
    })
}

function nonNull(val: any, fallback: any) { return Boolean(val) ? val : fallback };

function DOMparseNode(element: any, properties: any, children: any) {
    const el = document.createElement(element) as HTMLElement;
    // here it is possible to set style...
    // el["style"]["color"] = "red";
    Object.keys(nonNull(properties, {})).forEach(key => {
        if(key === 'style') {
            Object.keys(nonNull(properties[key], {})).forEach(styleKey => {
                console.log(element + "." + key + "." + styleKey + " = " + properties[key][styleKey]);
                // here it is not possible.......
                el[key][styleKey] = properties[key][styleKey];
                el["style"]["color"] = "red";
            });
        }
        el[key] = properties[key];
    })
    DOMparseChildren(children).forEach((child: any) => {
        el.appendChild(child);
    });
    return el;
}

function DOMcreateElement(element: any, properties: any, ...children: any) {
    if(typeof element === 'function') {
        return element( { ...nonNull( properties, {} ), children } );
    }
    return DOMparseNode(element, properties, children);
}

用法，它应该有助于以下场景：

document.body.appendChild(<div style={{color: 'red'}}></div>)

console.log 确实记录了正确的输出：h1.style.color = red

那么为什么它不在console.log 正下方应用我的样式呢？？

我没有收到任何错误。这使得调试变得更加困难:(

如果需要更多上下文，请告诉我！

最终目标是替换
el["style"]["color"] = "red";
与
el[key][styleKey] = properties[key][styleKey];

Answer 1

线

el[key] = properties[key];

正在覆盖properties[key] 循环中设置的所有样式。你应该把它放在一个 else 块中，所以它只适用于 non-style 属性。

function DOMparseNode(element: any, properties: any, children: any) {
    const el = document.createElement(element) as HTMLElement;
    // here it is possible to set style...
    // el["style"]["color"] = "red";
    Object.keys(nonNull(properties, {})).forEach(key => {
        if(key === 'style') {
            Object.keys(nonNull(properties[key], {})).forEach(styleKey => {
                console.log(element + "." + key + "." + styleKey + " = " + properties[key][styleKey]);
                // here it is not possible.......
                el[key][styleKey] = properties[key][styleKey];
                el["style"]["color"] = "red";
            });
        } else {
            el[key] = properties[key];
        }
    })
    DOMparseChildren(children).forEach((child: any) => {
        el.appendChild(child);
    });
    return el;
}