web-dev-qa-db-fra.com

Utilisation de HTML statique avec React

J'apprends à utiliser React et, jusqu'à présent, j'apprécie beaucoup. Cependant, je rencontre un peu de problème.

En tant que pratique avec React, j'essaie de créer un menu de navigation qui affiche un contenu différent en fonction de l'élément ou de l'onglet actif. Ces différentes vues seront, à mes fins, de nature statique, principalement informatives avec peut-être de l'audio ou de la vidéo intégrée. Mais il peut y avoir beaucoup de contenu dans chaque vue. Pour moi, il est plus logique de créer des fichiers HTML séparés et d'utiliser leur contenu dans ces différentes vues. Cependant, la seule façon de voir cela sans l'utilisation d'une bibliothèque externe est de mettre le contenu statique pour chaque vue dans son propre composant React qui ne fait que rendre ce contenu statique.

Cela me semble idiot. Existe-t-il un moyen d'accomplir ce que j'essaie de faire dans React? Sinon, existe-t-il une bibliothèque légère ou largement utilisée qui me permettra d'accomplir cela? Merci d'avance!

javascripthtmlreactjs
20
SethGunnells

Si vous souhaitez charger tout le code HTML au moment du chargement de la page, vous devez créer dynamiquement un script dans votre processus de construction ou votre serveur:

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

Vous pouvez le faire dans le nœud pour un répertoire comme celui-ci:

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){
        // ...
    });
});

Dans React vous pouvez alors avoir une structure comme celle-ci:

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>;
    }
});

Remarque: il n'y a rien de mal à avoir React composants pour le contenu de la page, ce n'est tout simplement pas le meilleur format pour tous les types de contenu. Si vous avez besoin d'une page où vous aurez beaucoup de composants interactifs, alors il pourrait être judicieux de le représenter comme un composant.

5
Brigand

Nous avons récemment rencontré un problème similaire en essayant d'intégrer du HTML statique dans notre application React (Dans ce cas, le HTML était un modèle qui aurait React composants 'injecté) ", donc c'était potentiellement un peu plus complexe que votre situation.) Comme vous, nous voulions pouvoir créer du HTML brut (afin qu'il puisse être généré par des outils standards).

Un collègue a créé cette bibliothèque pour accomplir la tâche:

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

Il analyse l'arbre HTML, le convertissant en un 'arbre React' que vous pouvez intégrer dans un composant React. Cela évite l'utilisation de dangerouslySetInnerHtml et ne nécessite aucun prétraitement au moment de la construction sur le HTML.

1
Matt Holland