reactjs에서 기존 Dom을 다시 작성하는 방법은 무엇입니까?

Question

현재 reactJS가 다음 설치 작업을 수행하려고합니다.

서버에서 xml-DOM을 가져오고 있습니다. 그것의 서버 측은 컴포넌트를 렌더링하는 다른 클라이언트 (HTML이 아니라 자바)에 의해 소비되는 "custom"DOM을 렌더링했습니다.

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

ReactComponents를 React.createClass()로 정의했습니다. 그래서 레이블, 필드 및 행 (div) 있습니다.

현재 xml-DOM의 구성 요소를 반응으로 렌더링하는 방법을 사용할 수 없습니다. 나는 xml-DOM에 물적 일을하고 위에서 발췌 문장을 얻었다. React.createElement (행, {},?)를 호출하는 "행"셸을 찾았습니까? 그러나 나는 아이들이 무엇을 채울 것인지를 모른다. XML DOM을 자세히 살펴보기 전에 자식이없는 "endNode"가 생길 때까지 xml-DOM을 살펴본 후 어떻게 반응 요소를 아래에서 위로 만들 수 있습니까? 수퍼 문자열을 만들어야하고 어떻게 든 자바 스크립트로 호출해야합니까?

행을 만들고 길을 추가하는 방법이 있습니까? 구성 요소 소품을 사용해야합니까? 같은 뭔가 : 내가 거의 해결책 올 수 없으니

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

-는 반응과 함께 할 수 있습니까? 아니면 반응이없는 것을하려고합니까? 아마 나는 완전히 어린이 개념을 이해하지 못합니다. 어쩌면 그것 자체가 아니라 반응 자체가 ...

나를위한 힌트가 있습니까?

greetz

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이