प्रतिक्रिया में डोम को कैसे जोड़ना है?

Here's a js fiddle कार्रवाई में प्रश्न दिखा रहा है।प्रतिक्रिया में डोम को कैसे जोड़ना है?

किसी घटक के रेंडर फ़ंक्शन में, मैं कक्षा .blah के साथ एक div प्रस्तुत करता हूं। समान घटक के componentDidMount समारोह में, मैं (के बाद से घटक घुड़सवार था) वर्ग .blah का चयन करें और इस तरह से यह करने के लिए संलग्न करने के लिए सक्षम होने के लिए

$('.blah').append("<h2>Appended to Blah</h2>");

हालांकि, संलग्न सामग्री दिखाई नहीं करता है उम्मीद कर रहा था। मैंने उसी तरीके से जोड़ने के लिए भी कोशिश की (फिडल में भी दिखाया गया) लेकिन एक मूल घटक से एक उपकंपनी में, उसी परिणाम के साथ, और उपरोक्त से भी मूल घटक के स्थान पर उसी परिणाम के साथ। उत्तरार्द्ध का प्रयास करने के लिए मेरा तर्क यह था कि कोई भी यह सुनिश्चित कर सकता है कि डोम तत्व प्रस्तुत किया गया था।

एक ही समय में, मैं getDOMNode करने में सक्षम था (componentDidMount समारोह में) और कहा कि

var domnode = this.getDOMNode(); 
$(domnode).append("<h2>Yeah!</h2>")

अभी तक

कारणों सीएसएस स्टाइल के साथ क्या करने के लिए मैं एक साथ एक div करने के लिए संलग्न करने के लिए सक्षम होने के लिए कामना की को संलग्न कक्षा जो मुझे पता है। इसके अलावा, docsgetDOMNode के अनुसार के बाद से हटा दिया गया है, और यह एक ही बात

var reactfindDomNode = React.findDOMNode(); 
$(reactfindDomNode).append("<h2>doesn't work :(</h2>");

मुझे नहीं लगता कि getDOMNode या findDOMNode मैं क्या 'करने के लिए सही तरीका है करने के लिए getDOMNode के प्रतिस्थापन का उपयोग करना संभव नहीं है मैं करने की कोशिश कर रहा हूँ।

प्रश्न: क्या प्रतिक्रिया में किसी विशिष्ट आईडी या कक्षा में शामिल होना संभव है? क्या दृष्टिकोण रहा कि मैं क्या करने की कोशिश कर रहा हूँ पूरा करने के लिए उपयोग करना चाहिए (हालांकि यह पदावनत है getDOMNode?)

var Hello = React.createClass({ 
    componentDidMount: function(){ 

     $('.blah').append("<h2>Appended to Blah</h2>"); 
     $('.pokey').append("<h2>Can I append into sub component?</h2>"); 
     var domnode = this.getDOMNode(); 
     $(domnode).append("<h2>appended to domnode but it's actually deprecated so what do I use instead?</h2>") 

     var reactfindDomNode = React.findDOMNode(); 
     $(reactfindDomNode).append("<h2>can't append to reactfindDomNode</h2>"); 

    }, 
    render: function() { 
     return (
      <div class='blah'>Hi, why is the h2 not being appended here? 
      <SubComponent/> 
      </div> 
     ) 
    } 
}); 

var SubComponent = React.createClass({ 

     componentDidMount: function(){ 
     $('.blah').append("<h2>append to div in parent?</h2>"); 
     }, 

     render: function(){ 
     return(
       <div class='pokey'> Hi from Pokey, the h2 from Parent component is not appended here either?    
       </div> 
     ) 
     } 
}) 

React.render(<Hello name="World" />, document.getElementById('container'));

स्रोत

2015-06-09 BrainLikeADullPencil

JSX में, आप:

getInitialState: function() { 
    return { 
     appended: false 
    }; 
},

बदलें राज्य (हम संलग्न करना चाहते हैं)

componentDidMount: function() { 
    this.setState({ 
     appended: true 
    }); 
    // ... 
}

अब समारोह प्रस्तुत करना अतिरिक्त पाठ या स्थिति के आधार पर नहीं दिखा सकते हैं className का उपयोग करना है, class नहीं। कंसोल को इसके बारे में एक चेतावनी दिखाना चाहिए।

फिक्स्ड उदाहरण: https://jsfiddle.net/69z2wepo/9974/

आप React.findDOMNode गलत तरीके से उपयोग कर रहे हैं। आपको इसके लिए एक प्रतिक्रिया घटक पारित करना होगा, उदा।

var node = React.findDOMNode(this);

घटक के डीओएम नोड को वापस कर देगा।

हालांकि, जैसा कि पहले से ही उल्लेख किया गया है, आपको वास्तव में प्रतिक्रिया के बाहर डीओएम को म्यूट करने से बचना चाहिए। पूरे बिंदु यूआई को राज्य और प्रोप के घटक के आधार पर का वर्णन करना है। फिर घटक को पुन: प्रस्तुत करने के लिए राज्य या प्रोप को बदलें।

स्रोत

2015-06-09 02:18:15

के हिस्से के रूप में इसे नहीं करना चाहिए यदि आपको डोम को म्यूटेट करने से बचना चाहिए, तो लोग d3.js जैसे पुस्तकालयों का उपयोग कैसे करते हैं जो डोम में संलग्न होते हैं? क्या यह एक अच्छा फिट नहीं है? – BrainLikeADullPencil

आह डी 3 ... हाँ, इसमें अपवाद हैं, खासकर जब यह तीसरे पक्ष के पुस्तकालयों की बात आती है। यदि आप रिएक्ट + डी 3 की खोज करते हैं तो आपको कुछ दृष्टिकोण मिलेगा कि यह कैसे संभाला जाता है। –

अपवाद? आप का मतलब है कि सामान्य नियम के अपवाद हैं कि किसी को डोम को म्यूट करने से बचना चाहिए? – BrainLikeADullPencil

jQuery प्रयोग करने से बचें अंदर, प्रतिक्रिया के रूप में यह एक antipattern का एक सा हो जाता है। मैं इसे थोड़ा सा उपयोग करता हूं, लेकिन केवल लुकअप/रीड के लिए जो जटिल या घटकों के साथ असंभव या असंभव हैं।

फिर भी, अपनी समस्या को हल करने के लिए, बस एक राज्य वस्तु का लाभ उठाने कर सकते हैं:

<!DOCTYPE html> 
<html> 
    <head> 
    <title></title> 
    <script src="https://fb.me/react-0.13.3.js"></script> 

    </head> 
    <body> 
    <div id='container'></div> 
    <script> 
    'use strict'; 

var Hello = React.createClass({ 
    displayName: 'Hello', 

    componentDidMount: function componentDidMount() { 
     this.setState({ 
      blah: ['Append to blah'], 
      pokey: ['pokey from parent'] 
     }); 
    }, 

    getInitialState: function() { 
     return { 
     blah: [], 
     pokey: [] 
     }; 
    }, 

    appendBlah: function appendBlah(blah) { 
     var blahs = this.state.blah; 
     blahs.push(blah); 
     this.setState({ blah: blahs }); 
    }, 
    render: function render() { 
     var blahs = this.state.blah.map(function (b) { 
      return '<h2>' + b + '</h2>'; 
     }).join(''); 
     return React.createElement(
      'div', 
      { 'class': 'blah' }, 
      { blahs: blahs }, 
      React.createElement(SubComponent, { pokeys: this.state.pokey, parent: this }) 
     ); 
    } 
}); 

var SubComponent = React.createClass({ 
    displayName: 'SubComponent', 

    componentDidMount: function componentDidMount() { 
     this.props.parent.appendBlah('append to div in parent?'); 
    }, 

    render: function render() { 
     var pokeys = this.props.pokeys.map(function (p) { 
      return '<h2>' + p + '</h2>'; 
     }).join(''); 
     return React.createElement(
      'div', 
      { 'class': 'pokey' }, 
      { pokeys: pokeys } 
     ); 
    } 
}); 

React.render(React.createElement(Hello, { name: 'World' }), document.getElementById('container')); 
    </script> 
    </body> 
</html>

JSX के लिए खेद है रूपांतरण, लेकिन सिर्फ आसान घुरघुराना की स्थापना :) बिना मुझे परीक्षण करने के लिए के लिए किया गया था।

वैसे भी, मैं जो कर रहा हूं वह राज्य संपत्ति का लाभ उठा रहा है। जब आप सेटस्टेट को कॉल करते हैं, तो रेंडर() को फिर से बुलाया जाता है। मैं फिर उप घटक को डेटा पास करने के लिए प्रोप का लाभ उठाता हूं। - JQuery से बचने JSFiddle

agmcleod की सलाह सही है:

स्रोत

2015-06-09 02:08:46 agmcleod

यह वास्तव में jquery का उपयोग नहीं कर रहा है, लेकिन एक और लाइब्रेरी जिसमें एक संलग्न विधि है। (मुझे लगता है कि आपका समाधान अभी भी लागू होगा)। मैंने अभी इस सवाल के लिए jquery का उपयोग किया क्योंकि यह समस्या को सचित्र करता है और jsfiddle पर सेट करना आसान है .. मैं आपके उत्तर का प्रयास करूंगा और – BrainLikeADullPencil

यहाँ सबसे कम परिवर्तन के साथ अपने JSFiddle का एक संस्करण मैं कर सकता है। मैं जोड़ूंगा, JQuery सोच से बचें, जिसने मुझे पता लगाने में कुछ समय लगाया। वास्तव में, प्रस्तुत करने के तरीके को प्रस्तुत करना चाहिए जो आप घटक की स्थिति के आधार पर देखना चाहते हैं। तथ्य के बाद डीओएम में हेरफेर न करें, राज्य में हेरफेर करें। जब आप राज्य को बदलते हैं, तो घटक फिर से प्रस्तुत किया जाएगा और आप परिवर्तन देखेंगे।

आरंभिक स्थिति सेट करें (हमने कुछ भी शामिल नहीं किया है)।

render: function() { 
    if (this.state.appended) { 
     appendedH2 = <h2>Appended to Blah</h2>; 
    } else { 
     appendedH2 = ""; 
    } 
    return (
     <div class='blah'>Hi, why isn't the h2 being appended here? {appendedH2} 
     <SubComponent appended={true}/> </div> 
    ) 
}

स्रोत

2015-06-09 02:18:10

स्वीकार करूँगा यदि आपको डोम को म्यूट करने से बचना चाहिए, तो लोग d3.js जैसे पुस्तकालयों का उपयोग कैसे करते हैं वह डोम में संलग्न है? क्या यह एक अच्छा फिट नहीं है? – BrainLikeADullPencil

मुझे नहीं पता। मैंने d3.js का उपयोग किया है लेकिन प्रतिक्रिया के साथ नहीं। आप _OM_ को डोम में हेरफेर करते हैं, आपको अपने रिएक्ट घटकों –

प्रतिक्रिया में डोम को कैसे जोड़ना है?

उत्तर

संबंधित मुद्दे