react 组件中的虚拟DOM 操作

Question

阐述： 本人是 reactJS 的初学者 ；
需求如下： 
1、react 组件 aa.jsx

2、react 组件 bb.jsx

3、react 主入口 main.jsx 需要 根据 一个 json 文件来加载 所需的组件

但是问题来， 在这里的page 都是 一个个的 函数。 怎样 将其中的 dom 块（div 元素） 取出来 一个个有序的 添加到 index.html 页面上的 某个指定的 dom元素中去 。

Answer 1

首先我不明白的是，你的 aa.jsx 和 bb.jsx 既然那么像，为什么还写两个（当然也可能是你为了方便写例子）。既然是多个不同的文件，它就是不同的 React 组件，如果只是想把它们都渲染在某个 DOM 下，直接把它们放到一个数组就好。下面的代码我没有测试，但应该是能用的const components = [];for (var i=0 ; i< data.length ; i++){&nbsp; &nbsp; var Page = require('./components/'+ data[i]['page'] +'.jsx');&nbsp; &nbsp; components.push(<Page />);}在要嵌入的地方，JSX 代码<FatherComponent>&nbsp; &nbsp; {components}</FatherComponent>如果是要随时更新它，重新渲染就行了，可以用 this.state.components你可以来看看我们翻译的&nbsp;React 文档