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

問題描述

闡述： 本人是 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元素中去 。

問題解答

首先我不明白的是，你的 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 文檔

這跟虛擬dom沒關系，雖然我不知道你為什么這樣用~但你這樣用法就是錯的！