Utilizzo di HTML statico con React

Question

Sto imparando come usare React e, finora, mi sto divertendo molto. Tuttavia, sto incontrando un po 'di problemi.

Come pratica con React, sto cercando di creare un menu di navigazione che mostri contenuti diversi in base all'elemento o al tab attivo. Questi diversi punti di vista, per i miei scopi, saranno di natura statica, principalmente informativa con forse qualche audio o video incorporato. Ma ci può essere un sacco di contenuti in ogni vista. Per me, ha più senso creare file HTML separati e utilizzare i loro contenuti in queste diverse visualizzazioni. Tuttavia, l'unico modo che posso vedere per farlo senza l'uso di una libreria esterna consiste nel mettere il contenuto statico per ogni vista nel proprio componente React che non fa altro che rendere quel contenuto statico.

Mi sembra stupido. C'è un modo per realizzare ciò che sto cercando di fare in React? In caso contrario, c'è una libreria leggera o ampiamente utilizzata che mi permetterà di realizzare questo? Grazie in anticipo!

Answer 1

Se si desidera caricare tutto il codice HTML in fase di caricamento della pagina, è necessario creare dinamicamente uno script nel vostro processo di generazione o il server:

var PAGE_HTML={"page1.html": "...","page2.html":"..."}; 

Si può fare questo in nodo per una directory in questo modo:

var readAll = require('read-dir-files').read; 
readAll('./pages', 'utf-8', false, function(err, files){ 
    if (err) return doSomething(err); 

    fs.writeFile('dist/pages.js', "var PAGE_HTML=" + JSON.stringify(files), function(err){ 
     // ... 
    }); 
}); 

In Reagire si può quindi avere una struttura come questa:

var App = React.createClass({ 
    getInitialState: function(){ return {page: "page2.html"} }, 
    navigate: function(toPage){ 
     this.setState({page: toPage}) 
    }, 
    render: function(){ 
     return <div> 
      <ul> 
       <li onClick={this.navigate.bind(null, "page1.html")}>Page 1</li> 
      </ul> 
      <div dangerouslySetInnerHTML={{__html: PAGE_HTML[this.state.page]}} /> 
     </div>; 
    } 
}); 

Nota a margine: non c'è niente di sbagliato nell'avere i componenti di React per il contenuto della pagina, non è il formato migliore per tutti i tipi di contenuti. Se hai bisogno di una pagina in cui avrai molti componenti interattivi, potrebbe avere senso rappresentarla come componente.

Answer 2

Recentemente abbiamo avuto un problema simile di provare ad integrare l'HTML statico nella nostra applicazione React (in questo caso l'HTML era un modello con i componenti di React "iniettati", quindi era potenzialmente un po 'più complesso del tuo situazione). Come te, volevamo essere in grado di creare HTML non elaborato (in modo che potesse essere generato da strumenti standard).

Un collega ha creato questa libreria per realizzare il compito:

https://github.com/mikenikles/html-to-react

analizza l'albero HTML, trasformandola in un 'Reagire albero', che è possibile incorporare in un componente reagire. Questo evita l'uso di dangerouslySetInnerHtml e non richiede alcuna pre-elaborazione in fase di elaborazione sul codice HTML.