如何在reactjs中重建現有的Dom？

Question

我目前正在嘗試使reactJS與以下安裝程序一起使用：

我從服務器獲取xml-DOM。 它是服務器端呈現的“自定義” DOM，通常由呈現組件的另一個客戶端（不是html，而是java）使用。

<row id="a">
    <label id="aa" width="140" text="Title" />
    <field id="ab" bgpaint="" width="200" text="" enabled="true" />
</row>

我用React.createClass（）定義了一些ReactComponents。 因此，我有一個標簽，一個字段和一個行（div）。

目前，我無法找到一種通過react呈現xml-DOM組件的方法。 我將通過xml-DOM並從上面獲取摘錄。 如果找到“行”外殼，我會調用React.createElement（Row，{}，？）？ 但是我不知道什么孩子會填補“？” 在我更深入地研究xml-DOM之前。 如果我遍歷xml-DOM直到得到一個沒有子節點的“ endNode”，我該如何從下到上創建react元素？ 我是否必須創建一個超級String並以某種方式將其稱為javascript。

有沒有辦法創建行，然后添加子項？ 我必須使用組件道具嗎？ 就像是：

//<row> found
var newRow = React.createElement(Row, {}, ?);
...
//found the label in the row
var newLabel = React.createElement(Label, {}, "Title");
newRow.add(newLabel);

我幾乎無法解決-可以做出反應嗎？ 還是我正在嘗試做一些沒有反應的事情？ 可能我不太了解孩子的概念。 也許它本身並不是一個反應問題...

對我有什么提示嗎？

格爾茨

Answer 1

在調用createElement之前，請創建子數組。 例如（ jsfiddle ）：

function pascalize(str) {
    return str.split("-").map(function(name) {
        return name.charAt(0).toUpperCase() + name.slice(1).toLowerCase();
    }).join("");
}

function attrsToProps(attrs) {
    var obj = {};
    for (var i = 0; i < attrs.length; ++i) {
        obj[attrs[i].nodeName] = attrs[i].value;
    }
    return obj;
}

function toReact(node, components) {
    if (node.nodeType === 1) {
        var children = [].map.call(node.childNodes, function(child) {
            return toReact(child, components);
        });
        return React.createElement(components[pascalize(node.nodeName)],
                                    attrsToProps(node.attributes),
                                    children);
    } else if (node.nodeType === 3) {
        return (node.nodeValue + "").trim();
    }
    return "";
}

function xmlToReactComponents(xmlDom, components) {
    if (xmlDom && xmlDom.documentElement) {
        return React.createElement("div", [], [].map.call(xmlDom.documentElement.childNodes, function(child) {
            return toReact(child, components);
        }));
    }
}

jsfiddle中的用法是：

var xml = document.querySelector("#xml").innerHTML;
var parser = new DOMParser();
var dom = parser.parseFromString(xml, "text/xml");

var defaultClass = {
    render: function() {
        return React.createElement("div", {}, "id: " + this.props.id, this.props.children);
    }  
};

var components = {
    Row: React.createClass(defaultClass),
    Label: React.createClass(defaultClass),
    Field: React.createClass(defaultClass)
}
var result = xmlToReactComponents(dom, components);
React.render(result, document.body);

您需要傳遞xml可以在對象中創建的所有組件，否則整個事情都會失敗