Utilisation de HTML statique avec React

Je suis en train d'apprendre comment utiliser Réagir et, jusqu'à présent, je suis très bien en profiter. Cependant, je suis en cours d'exécution dans un peu d'un problème.

Pratique à Réagir, je suis en train de construire un menu de navigation qui montre les différents contenus en fonction de l'élément actif ou de l'onglet. Ces différents points de vue, pour ma part, être statique dans la nature, principalement informative avec peut-être quelques embedded audio ou vidéo. Mais il peut y avoir beaucoup de contenu dans chaque vue. Pour moi, cela fait plus de sens pour créer des fichiers HTML et l'utilisation de leurs contenus dans ces différents points de vue. Toutefois, la seule façon que je peux voir de le faire sans l'utilisation d'une bibliothèque externe est de mettre le contenu statique pour chaque point de vue dans son propre Réagir composant qui n'est rien mais le rendu que du contenu statique.

Cela semble ridicule à moi. Est-il un moyen pour accomplir ce que je suis en train de faire à Réagir? Si non, est-il un léger ou plus largement utilisé de la bibliothèque qui va me permettre d'accomplir cette mission? Merci à l'avance!

source d'informationauteur SethGunnells

  1. 2

    Si vous voulez charger tout le code html au temps de chargement de page, vous devez créer dynamiquement un script dans votre processus de création ou de serveur:

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

    Vous pouvez le faire de nœud pour un répertoire comme ceci:

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

    À Réagir vous pouvez alors avoir une structure comme ceci:

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

    Note de côté: il n'y a rien de mal à avoir de Réagir composants pour le contenu de la page, c'est juste pas le meilleur format pour tous les types de contenu. Si vous avez besoin d'une page où vous aurez beaucoup d'éléments interactifs, alors il peut faire sens pour la représenter comme un composant.

  2. 1

    Nous avons récemment eu un problème similaire en essayant de l'intégrer en HTML statique dans notre Réagir application (Dans ce cas, le HTML est un modèle qui aurait Réagir composants injectés " dans ce, il était donc potentiellement un peu plus complexe que votre situation). Comme vous, nous voulions être en mesure de créer du HTML brut (de Sorte qu'il pourrait être généré par des outils standard).

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

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

    Il analyse le code HTML de l'arbre, en le convertissant en un "Réagir" arbre que vous pouvez intégrer à une Réagir composant. Cela évite l'utilisation de dangerouslySetInnerHtml et ne nécessite aucun moment de la construction, de pré-traitement sur le code HTML.