ReactJS：将数据传递给组件以在两个列中呈现

Question

我创建了一个组件，我想用它来呈现我传递的数据，但我想获得的是这些数据分为两列。 我能怎么做？

目前我的数据仅在一行中的列中：

这是我的渲染功能：

export const RenderDetail = props => {
  return props.map((content, key) => {
    return (
      <div className="container">
        <div key={key}>
          <Row>
          <Col md="8">
            <dl className="jh-entity-details">
              <dt>
                <span id={content.id}>{content.name}</span>
              </dt>
              <dd>{content.value}</dd>
            </dl>
          </Col>
          </Row>
        </div>
      </div>
    );
  });
};

这就是我传递数据的方式以及我如何称呼它：

const Content = [
    {
      id: 'id',
      name: 'ID',
      value: ralm.id,
    },
    {
      id: 'realmId',
      name: 'Realm Id',
      value: realm.realmId,
    },
    {
      id: 'name',
      name: 'Name',
      value: realm.name,
    },
    {
      id: 'otherField',
      name: 'Other Field',
      value: realm.other,
    },
  ];

  return (
    <div>
      {RenderDetail(Content)}
    </div>
  );

编辑：

我想获得什么：

ID:                                   RealmId:
value                                 Value


Name:                                 OtherField:
value                                 value

Answer 1

您需要做的是有条件地在新行中呈现数组中的每个替代元素。 所以代码看起来像这样。 我尚未对此进行测试，因此您可以将其用作获取想法的参考。

export const RenderDetail = props => {
  const contentToRender = [];
  props.forEach((currentElement, index) => {
    if(index % 2 === 0) return;

    const nextElement = props[index +1];
    contentToRender.push(
      <Row key={currentElement.id}>
        <Col md="8">
          <dl className="jh-entity-details">
            <dt>
              <span id={currentElement.id}>{currentElement.name}</span>
            </dt>
            <dd>{currentElement.value}</dd>
          </dl>
        </Col>
        {nextElement && (
          <Col md="8">
            <dl className="jh-entity-details">
              <dt>
                <span id={nextElement.id}>{nextElement.name}</span>
              </dt>
              <dd>{nextElement.value}</dd>
            </dl>
          </Col>
        )}
      </Row>
    );
  });

  return (<div className="container">{contentToRender}</div>);
};