javascript - 如何在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() 定义了一些 ReactComponent。所以我有一个标签、一个字段和一个行 (div)。

目前我无法找到一种方法来使用 React 渲染 xml-DOM 的组件。 我将遍历 xml-DOM 并从上面获取片段。如果我找到一个“行”shell，我会调用 React.createElement(Row, {}, ?)?但我不知道什么 child 会来填补这个“？”在我深入研究 xml-DOM 之前。 如果我遍历 xml-DOM 直到得到一个没有子节点的“endNode”，我如何从下到上创建 react 元素？我是否必须创建一个 super 字符串并以某种方式将其称为 javascript。

有没有办法创建一行，然后添加子行？我必须使用组件 Prop 吗？ 像这样的东西:

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

我很难找到解决方案 - 可以用 React 来做吗？或者我正在尝试做一些不适合 react 的事情？可能我不完全理解 child 的概念。 或者也许它本身并不是一个真正的 react 问题......

有什么提示给我吗？

打招呼

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 可以在对象中创建的所有组件，否则整个过程都会失败