Javascript – Virtuelle DOM-Manipulation in Reaktionskomponenten

Question

Erklärung: Ich bin ein Anfänger von ReactJS.
Die Anforderungen sind wie folgt:
1 React-Komponente aa.jsx

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

2. Reaktionskomponente bb.jsx

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

3. Der Haupteingang von React, main.jsx, muss die erforderlichen Komponenten basierend auf einer JSON-Datei laden

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

Aber das Problem ist, dass die Seiten hier alle Funktionen haben. So nehmen Sie die Dom-Blöcke (p-Elemente) heraus und fügen sie nacheinander einem bestimmten Dom-Element auf der Seite index.html hinzu.

Answer 1

首先我不明白的是，你的 aa.jsx 和 bb.jsx 既然那么像，为什么还写两个（当然也可能是你为了方便写例子）。既然是多个不同的文件，它就是不同的 React 组件，如果只是想把它们都渲染在某个 DOM 下，直接把它们放到一个数组就好。

下面的代码我没有测试，但应该是能用的

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

在要嵌入的地方，JSX 代码

<FatherComponent>
    {components}
</FatherComponent>

如果是要随时更新它，重新渲染就行了，可以用 this.state.components

你可以来看看我们翻译的 React 文档

Answer 2

这跟虚拟dom没关系，虽然我不知道你为什么这样用~但你这样用法就是错的！