React开发-根据变量动态添加render中的JSX元素

1、背景

需要根据某变量，如列表元素，const values = [{‘text’:‘123’},{‘text’:‘456’}],动态绘制页面元素，如上述列表元素需要绘制出两个 下拉框+输入框 的组合。

2、问题：

一般绘制页面代码如下：

import React, { Component } from ‘react’;
class A extends Component {
// xxx;

render() {
    return <div>
                <div><select/><input/></div>
                <div><select/><input/></div>
           </div>;
}

}
但是现在需要根据values渲染界面，独立出来一个函数来拼接jsx元素，动态加入render函数返回值，但是jsx元素没有类似append这样的元素追加函数可以使用。所以借助于其他方式来实现该功能。

3、解决

借助map函数，及jsx语法实现如下：

import React, { Component } from ‘react’;
class A extends Component {
// xxx;

genElements = (values) => {
    if(!values){
        return null;
    }
    return values.map((value, index) => {
        return this.addEle(value