如何在 reactjs 中重建现有的 Dom

How to rebuild a existing Dom in reactjs?

本文关键字：Dom 重建 reactjs      更新时间：2023-09-26

我目前正在尝试让 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 并从上面获取片段。如果我找到一个"行"shell，我称之为React.createElement(Row， {}， ？(？但我不知道在我深入研究 xml-DOM 之前，孩子们会是什么来填补"？"。如果我遍历 xml-DOM，直到我得到一个没有子节点的"endNode"，我如何从下到上创建反应元素？我是否必须创建一个超级字符串并以某种方式将其称为 javascript。

有没有办法创建一个行，然后添加子级？我必须使用组件道具吗？像这样：

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

我几乎无法找到解决方案-可以用反应来做吗？还是我试图做一些反应不是为了什么？可能我并不完全理解儿童的概念。或者也许它本身并不是一个真正的反应问题......

对我有什么提示吗？

问候语

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

相关文章：