Un componente React può manipolare un nodo DOM esistente?

Question

Vorrei aggiungere un po 'di funzionalità a un codice HTML già funzionante. Diciamo che ho un modulo:

<form> 
    <input type="checkbox" /> Show details 

    <div class='details'> 
    <input type="text" name="first_name" /> 
    <input type="text" name="last_name" /> 
    </div> 
</form> 

Il codice HTML è già generato sul server. Mi chiedo, posso usare un componente React per, per esempio, aggiungere/rimuovere una classe hide al div .details ogni volta che la casella di controllo è selezionata e deselezionata?

Non voglio React per rieseguire il rendering del modulo, poiché il resto della pagina è già gestito dal server.

Answer 1

Controllare server-rendering React example. Puoi vedere che lo script PHP sta ottenendo React render risultato da node.js e lo restituisce al client e quindi lo stesso componente React è collegato al DOM per ulteriori modifiche.

Se si desidera visualizzare il rendering HTML sul lato server e gestito da React, questo è l'approccio migliore. Altrimenti dovrai scrivere modelli due volte: in React e sul tuo motore di template lato server.

Answer 2

C'è una soluzione ma non so se sia efficiente: È possibile utilizzare dangerouslySetInnerHTML per creare un wrapper sugli elementi DOM esistenti.

Si consideri ad esempio, si desidera aggiungere uno swapper su due già esistenti div elementi (https://jsfiddle.net/gdoumenc/a86g58qz/):

// a wrapper just rendering the previous DOM children 
var Wrapper = React.createClass({ 
    render: function() { 
     return <div dangerouslySetInnerHTML={{__html: this.props.html}}/>; 
    } 
}); 

// a simple swapper 
var Swapper = React.createClass({ 
    getInitialState: function() { 
     return {swap: false}; 
    }, 
    onClick: function() { 
     this.setState({swap: !this.state.swap}); 
    }, 
    replace: function(id) { 
     if (!(id in this)) { 
      var node = document.getElementById(id); 
      var elt = document.createElement(node.tagName); 
      elt.appendChild(node.childNodes[0]); 
      this[id] = elt.innerHTML; 
     } 
     return this[id]; 
    }, 
    render: function() { 

     // replace here the elements par wrapped ones 
     box1 = <Wrapper html={this.replace('box1')}/>; 
     box2 = <Wrapper html={this.replace('box2')}/>; 

     if (this.state.swap) { 
      content = [box1, box2]; 
     } else { 
      content = [box2, box1]; 
     }; 
     return <div> 
      {content}<button onClick={this.onClick}>Swap</button> 
     </div>; 
    } 
}); 

`