javascript - Manipulation du DOM virtuel dans les composants React

Question

Explication : je suis un débutant en ReactJS ;
Les exigences sont les suivantes :
1.

    var React = require('react');
    var aaa = React.createClass({
        render: function(){
            return (
                <p ref="username" className="comment2">
                    aaaaaaaaa
                </p>
            );
        }
    });
    module.exports = aaa;

2. réagir au composant bb.jsx

    var React = require('react');
    var aaa = React.createClass({
        render: function(){
            return (
                <p ref="username" className="comment3">
                    bbbbbbbbbbbbbbb
                </p>
            );
        }
    });
    module.exports = bbb;

3. L'entrée principale de React, main.jsx, doit charger les composants requis basés sur un fichier json

    json ={
            "data" : [
                {
                    "page" : "aa"
                },
                {
                    "page" : "bb"
                },
                {
                    "page" : "cc"
                }
            ]
        }
    在主函数这里 我用了一个for 循环 
    for (var i=0 ; i< data.length ; i++){
        var page = require('./components/'+ data[i]['page'] +'.jsx');
   }
   

Mais le problème est que les pages ici sont toutes des fonctions. Comment supprimer les blocs dom (éléments p) et les ajouter un par un à un élément dom spécifié sur la page index.html.

Answer 1

Tout d'abord, ce que je ne comprends pas, c'est que puisque vos aa.jsx et bb.jsx sont si similaires, pourquoi en écrivez-vous deux (bien sûr, il se peut que vous ayez écrit l'exemple par commodité ). Puisqu'il s'agit de plusieurs fichiers différents, ce sont des composants React différents. Si vous souhaitez simplement les restituer sous un certain DOM, placez-les simplement directement dans un tableau.

Je n'ai pas testé le code ci-dessous, mais il devrait fonctionner

const components = [];
for (var i=0 ; i< data.length ; i++){
    var Page = require('./components/'+ data[i]['page'] +'.jsx');
    components.push(<Page />);
}

Où intégrer, code JSX

<FatherComponent>
    {components}
</FatherComponent>

Si vous souhaitez le mettre à jour à tout moment, restituez-le simplement, vous pouvez utiliser this.state.components

Vous pouvez consulter notre documentation React traduite

Answer 2

Cela n'a rien à voir avec le dom virtuel. Bien que je ne sache pas pourquoi vous l'utilisez comme ça ~ mais ce n'est pas une bonne chose pour vous de l'utiliser de cette façon !