प्रतिक्रियाओं में पेड़ घटक में राज्य का प्रबंधन कैसे करें

Question

मैं इसे करने के लिए "प्रतिक्रिया" तरीका जानने के लिए कुछ दिनों के लिए संघर्ष कर रहा हूं।

असल में, मेरे पास एक पेड़ है, सूचियों की एक सूची (सूचियों ...) जो मनमाने ढंग से घोंसला जा सकती है, और मुझे एक घटक चाहिए जो इसे प्रदर्शित करेगा और पुनर्गठन भी सक्षम करेगा।

यहाँ मेरी डेटा है:

var data = [{ 
     id: 1 
    }, { 
     id: 2, children: [ 
     { 
      id: 3, children: [{id: 6}] 
     }, { 
      id: 4 
     }, { 
      id: 5 
     }] 
    }] 

मेरी पहली पास बस एक ही "पेड़" घटक है कि अपने कार्य प्रस्तुत करना (look at the code here) में डोम तत्वों का नेस्टेड सूचियों बनाता है करने के लिए किया गया था। वास्तव में तत्वों की छोटी संख्या के लिए बहुत अच्छी तरह से काम किया, लेकिन मैं सैकड़ों तत्वों का समर्थन करने में सक्षम होना चाहता हूं, और पेड़ के भीतर एक तत्व स्थानांतरित होने पर बहुत अधिक पुन: प्रस्तुत लागत थी (~ 600ms जब कुछ सौ थे तत्व)।

तो मुझे लगता है कि मेरे पास पेड़ का प्रत्येक "नोड" होगा, यह इस घटक का अपना उदाहरण होगा। लेकिन यहां मेरा प्रश्न है (लंबे परिचय के लिए खेद है):

क्या प्रत्येक नोड गतिशील रूप से सूची के लिए पूछताछ करता है कि यह केंद्रीय "डेटाबेस" से बच्चों की आईडी है और राज्य में स्टोर करता है? या शीर्ष-सबसे नोड पूरे पेड़ को लोड कर सकता है और प्रोप के माध्यम से सबकुछ नीचे कर सकता है?

मैं अभी भी अपने दिमाग को लपेटने की कोशिश कर रहा हूं कि कैसे राज्य & प्रोप को & को संभाला जाना चाहिए।

धन्यवाद

Answer 1

मैं प्रतिक्रिया के साथ वृक्ष संरचना की कोशिश करना चाहता था और एक के साथ आया था जब आप <h5> पर क्लिक करते हैं तो सरल घटक जो subtrees को छुपाता है। सब कुछ TreeNode है। क्या यह वही है जो आप सोच रहे थे?

आप इस JSFiddle में कार्रवाई में इसे देख सकते हैं: http://jsfiddle.net/ssorallen/XX8mw/

TreeNode.jsx:

var TreeNode = React.createClass({ 
    getInitialState: function() { 
    return { 
     visible: true 
    }; 
    }, 
    render: function() { 
    var childNodes; 
    if (this.props.node.childNodes != null) { 
     childNodes = this.props.node.childNodes.map(function(node, index) { 
     return <li key={index}><TreeNode node={node} /></li> 
     }); 
    } 

    var style = {}; 
    if (!this.state.visible) { 
     style.display = "none"; 
    } 

    return (
     <div> 
     <h5 onClick={this.toggle}> 
      {this.props.node.title} 
     </h5> 
     <ul style={style}> 
      {childNodes} 
     </ul> 
     </div> 
    ); 
    }, 
    toggle: function() { 
    this.setState({visible: !this.state.visible}); 
    } 
}); 

bootstrap.jsx:

var tree = { 
    title: "howdy", 
    childNodes: [ 
    {title: "bobby"}, 
    {title: "suzie", childNodes: [ 
     {title: "puppy", childNodes: [ 
     {title: "dog house"} 
     ]}, 
     {title: "cherry tree"} 
    ]} 
    ] 
}; 

React.render(
    <TreeNode node={tree} />, 
    document.getElementById("tree") 
); 

Answer 2

लगता है जैसे कि यह सब कुछ, रंगमंच की सामग्री के रूप में नीचे पारित करने के लिए के रूप में इस व्यक्ति प्रविष्टि/विलोपन के प्रबंधन की परेशानी से रोकेंगी अच्छे होगी। इसके अलावा, टिप्पणियों की तरह, key गुण अनावश्यक पुन: प्रतिपादन का एक बड़ा हिस्सा रोकता है।

आप इस लिंक को देखना चाहते हैं: http://facebook.github.io/react/blog/2013/11/05/thinking-in-react.html। यह आपके द्वारा की जाने वाली दुविधा के तरीके और इसका दृष्टिकोण कैसे प्राप्त करता है इसका वर्णन करता है।

(संयोग से, मैं एक प्रतिक्रिया पेड़ कुछ समय पहले ही देखने कर दिया है:। https://github.com/chenglou/react-treeview जो भी आप इसे से चाहते लो!)

Answer 3

यहां एक त्वरित उदाहरण है रिएक्ट और फ्लक्स का उपयोग करके वृक्षदृश्य कैसे बनाएं। http://www.syntaxsuccess.com/viewarticle/5510d81be1ce52d00e93da55

प्रतिक्रिया घटक रिकर्सिव है और राज्य फ्लक्स का उपयोग करके प्रबंधित किया जाता है।