Reactjs jsx通过阵列打印组件

我想在仪表板屏幕上均匀地列出组件。
最初，我只使用普通的

来设置要在父级中就地加载的组件

但现在，我将所有图形组件加载到一个数组中，并使用

getOdd

和

get偶数

函数将图形组件划分为两个数组

mod

问题是我现在不知道如何正确放置它们。我只是在屏幕上获得正确的字符串，而不是组件

我想我的问题出在

homeNewDashboard

打印它的地方，但我可能完全错了，我只是尝试了这个想法

下面是一些代码

我用了

”

，但我对此不确定。但它是正确的名称。是否可以将其转换为组件

getAllGraphs:function(pref){
    //STOP
    var graphs = [];
    if(pref){
        if (pref.graph_ave_pain)  {graphs.push(Graph_Ave_Pain)}
        if (pref.graph_adv_events){graphs.push(Graph_Events)}
        if (pref.graph_epidurals) {graphs.push(Graph_Epidurals)}
        if (pref.graph_modalities){graphs.push(Graph_Modalities)}
        if (pref.graph_surg_type) {graphs.push(Graph_Surgery_Type)}
        if (pref.graph_surg_type) {graphs.push(Graph_Surgeries)}
        if (pref.graph_diag)      {graphs.push(Graph_Diagnosis)}
    }
    return graphs;
},

getOddGraphs: function(pref){
    if(pref.licensecontrol) {
        var graphs = this.getAllGraphs(pref);
        var newArray = [];
        for (var i = 0; i < graphs.length; i++) {
            if (i % 2 > 0) {
                newArray.push(graphs[i]);
            }
        }
        return newArray;
    }
},

getEvenGraphs: function(pref){
    if(pref.licensecontrol) {
        var graphs = this.getAllGraphs(pref);
        var newArray = [];
        for (var i = 0; i < graphs.length; i++) {
            if (i % 2 == 0) {
                newArray.push(graphs[i]);
            }
        }
        return newArray;
    }
},




render () {



        var homeNewDashboard =
            <div>
                <div className="content-main row " style={{marginTop:-45}}>
                    <div className="col-sm-5 col-md-5">
                        <div>
                            <DayGraph />
                        </div>
                        <div>
                            {this.getOddGraphs(pref).map(function (i) {
                                return '<'+i.displayName+'/>';
                            })}
                        </div>
                    </div>
                </div>
            </div>;
    }

getAllGraphs:函数（pref）{
//停止
var图=[]；
if（pref）{
if（pref.graph\u ave\u pain）{graphs.push（graph\u ave\u pain）}
if（pref.graph\u adv\u events）{graphs.push（graph\u events）}
if（pref.graph_epiderals）{graphs.push（graph_epiderals）}
if（pref.graph_modules）{graphs.push（graph_modules）}
if（pref.graph\u surg\u type）{graphs.push（graph\u-type）}
if（pref.graph\u surg\u type）{graphs.push（graph\u Surgeries）}
if（pref.graph\u diag）{graphs.push（graph\u Diagnosis）}
}
返回图；
},
getOddGraphs:函数（pref）{
如果（首选许可证控制）{
var-graphs=this.getAllGraphs（pref）；
var newArray=[]；
对于（var i=0；i0）{
push（图[i]）；
}
}
返回新数组；
}
},
getEvenGraphs:函数（pref）{
如果（首选许可证控制）{
var-graphs=this.getAllGraphs（pref）；
var newArray=[]；
对于（var i=0；i

看起来您希望呈现要推送到阵列的组件之一：

<div>
    {this.getOddGraphs(pref).map(function (Component) {
        return <Component />;
    })}
</div>

{this.getOddGraphs（pref）.map（函数（组件）{
回来
})}

如果您的数组包含React组件，则类似的方法应该可以工作。对于JSX，用于呈现组件的关键字必须大写