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没关系，虽然我不知道你为什么这样用~但你这样用法就是错的！