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