javascript - ReactJS：在两列中呈现数据

问题描述

我有这个组件：

export const RenderDetail = props => {
  const createRows = props.content.reduce(function (rows, key, index) {
    console.log('rows, key, index', rows, key, index);
    return (index % 2 === 0 ? rows.push([key]) : rows[rows.length - 1].push(key)) && rows;
  }, []);

 return (
    <div>
      {createRows.map((row, index) => {
        return (
          <div key={`item_${index}`}>
            <Row>
              {row.map((col, key) => {
                return (
                  console.log('col ', col),
                  (
                    <div key={`item_${key}`} style={{ margin: '20px' }}>
                      <Col>
                        <dl className="jh-entity-details">
                          <dt>
                            <span id={col.id}>{col.name}</span>
                          </dt>
                          <dd>{col.value}</dd>
                        </dl>
                      </Col>
                    </div>
                  )
                );
              })}
            </Row>
          </div>
        );
      })}
    </div>
  );
};

我将一个 Object 数组传递给该组件，例如：

const Container = [
{
 id: "id",
 name: "ID",
 value: "10"
},
]

我会得到什么：

我想把数据分成两列，但这样它们太近了，粘在一起了。有没有办法表示它们，以便它们占据整个页面（总是在两列中？）

编辑：

<Col xs="12" md="6">按照建议使用

标签： javascriptcssreactjsreactstrap

我改变了你的沙箱。检查新的

问题出在这部分代码

                <div key={`item_${key}`} style={{ margin: '20px' }}>
                  <Col>

沙盒

首先，我删除了div包含Col标签的内容，然后将 6-grid 属性设置为 50% 的宽度。

javascript - ReactJS：在两列中呈现数据

问题描述

解决方案

推荐阅读