javascript - react 元件中的虛擬DOM 操作

Question

闡述： 本人是 reactJS 的初學者 ;
需求如下：
1、react 元件 aa.jsx

#

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

2、react 元件 bb.jsx

#

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

3、react 主入口 main.jsx 需要 根據 一個 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');
   }
   

但問題來， 在這裡的page 都是 一個個的 函數。怎樣 將其中的 dom 塊（p 元素） 取出來 一個個有序的 添加到 index.html 頁面上的 某個指定的 dom元素中去 。

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沒關係，雖然我不知道你為什麼這樣用~但你這樣用法就是錯的！