ReactJS动态遍历对象并显示4列

Question

我有一个reactjs应用程序，还有一个具有以下结构的state值monitors：

这个对象是一个虚拟对象，但是我的对象具有如下相同的结构：

[
 { "key" : "value" },
 { "key" : "value" },
 { "key" : "value" },
 { "key" : "value" },
 { "key" : "value" },
 { "key" : "value" },
 { "key" : "value" },
 { "key" : "value" },
 { "key" : "value" },
]

我使用bootstrap、row和col类来显示值。我的需求如下：

1. 我想显示这些值的4列，因此每行都有4列

因此，根据上面的对象，我有9数据集，这意味着它是3行，其中前两行各有4行，最后一行(第3行)只有一个值。

我该怎么做？

我目前正在进行如下操作，但得到的值与相同row中的row列相同。有人能帮帮我吗？

{Object.entries(this.state.monitors).map(([key, value]) => (
                    <div className="container">

                        <div className="row">
                            <div className="col-3">
                                <div className="card mb-3 " key={this.state.monitors.id}>
                                    <div className="card-header" style={value['overall_state'] == "OK" ? service_ok : value['overall_state'] == "Alert" ? service_alert : service_nodata}>
                                        <span><i className="fa fa-th"></i></span> {" "} {value["name"]}
                                    </div>
                                    <div className="card-body">
                                        <h5 className="card-title">{value['overall_state'] == "OK" ? <span><i style={{ color: "#2ce659" }} class="fa fa-check-circle"></i></span> : value['overall_state'] == "Alert" ? <span><i style={{ color: "#f24c3a" }} class="fa fa-times-circle"></i></span> : <span><i class="fa fa-exclamation-circle"></i></span>} Status - {value['overall_state'] == "OK" ? "Operational" : value['overall_state'] == "Alert" ? "Outage" : "Unknown"}</h5>
                                    </div>
                                </div>
                            </div>
                            <div className="col-3">
                                <div className="card mb-3 " key={this.state.monitors.id}>
                                    <div className="card-header" style={value['overall_state'] == "OK" ? service_ok : value['overall_state'] == "Alert" ? service_alert : service_nodata}>
                                        <span><i className="fa fa-th"></i></span> {" "} {value["name"]}
                                    </div>
                                    <div className="card-body">
                                        <h5 className="card-title">{value['overall_state'] == "OK" ? <span><i style={{ color: "#2ce659" }} class="fa fa-check-circle"></i></span> : value['overall_state'] == "Alert" ? <span><i style={{ color: "#f24c3a" }} class="fa fa-times-circle"></i></span> : <span><i class="fa fa-exclamation-circle"></i></span>} Status - {value['overall_state'] == "OK" ? "Operational" : value['overall_state'] == "Alert" ? "Outage" : "Unknown"}</h5>
                                    </div>
                                </div>
                            </div>
                            <div className="col-3">
                                <div className="card mb-3 " key={this.state.monitors.id}>
                                    <div className="card-header" style={value['overall_state'] == "OK" ? service_ok : value['overall_state'] == "Alert" ? service_alert : service_nodata}>
                                        <span><i className="fa fa-th"></i></span> {" "} {value["name"]}
                                    </div>
                                    <div className="card-body">
                                        <h5 className="card-title">{value['overall_state'] == "OK" ? <span><i style={{ color: "#2ce659" }} class="fa fa-check-circle"></i></span> : value['overall_state'] == "Alert" ? <span><i style={{ color: "#f24c3a" }} class="fa fa-times-circle"></i></span> : <span><i class="fa fa-exclamation-circle"></i></span>} Status - {value['overall_state'] == "OK" ? "Operational" : value['overall_state'] == "Alert" ? "Outage" : "Unknown"}</h5>
                                    </div>
                                </div>
                            </div>
                            <div className="col-3">
                                <div className="card mb-3 " key={this.state.monitors.id}>
                                    <div className="card-header" style={value['overall_state'] == "OK" ? service_ok : value['overall_state'] == "Alert" ? service_alert : service_nodata}>
                                        <span><i className="fa fa-th"></i></span> {" "} {value["name"]}
                                    </div>
                                    <div className="card-body">
                                        <h5 className="card-title">{value['overall_state'] == "OK" ? <span><i style={{ color: "#2ce659" }} class="fa fa-check-circle"></i></span> : value['overall_state'] == "Alert" ? <span><i style={{ color: "#f24c3a" }} class="fa fa-times-circle"></i></span> : <span><i class="fa fa-exclamation-circle"></i></span>} Status - {value['overall_state'] == "OK" ? "Operational" : value['overall_state'] == "Alert" ? "Outage" : "Unknown"}</h5>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                ))}

Answer 1

每一行都有12个虚拟1单元列.您使用3单元列，因此只有4将适合行，然后包装和重新开始。

您必须简单地迭代这个对象(就像现在所做的那样)，并为每个值呈现单个col-3 div。确保将此循环包装在container和row中。