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, index);
        });
    }

    addEle = (value, index) => {
        // 需要指定key 不重复，否则会报警告
        return <div key={index}><select/><input value={value} /></div>;
    }


    render() {
        const values =  [{'text':'123'},{'text':'456'}];
        return <div>
                    {this.genElements(values)}
               </div>;
    }
}

这样即可实现元素的动态添加。

 

相关阅读：

二级循环嵌套元素：https://blog.csdn.net/qq_16591861/article/details/86527336