在React JSX中返回配对元素

Question

问题:

在React中,您希望通过映射数组来创建DOM结构,但数组中的每个项应返回2个元素.例如

import React from 'react'
import _ from 'lodash'

let { Component } = React

export default class DataList extends Component {
  render () {
    let array = [
      {def: 'item1', term: 'term1', obj1: 'rand'}, 
      {def: 'item2', term: 'term2'}
    ]
    return (
      <dl>
        {_.map(array, (item) => {
          return (
            <dt>{item.def}</dt>
            <dd>{item.term}</dd>
          )
        })}
      </dl>
    )
  }
}

React不允许你渲染兄弟姐妹而不将它们包装在容器元素中,这会破坏DOM结构.

Answer 1

你可以做这样简单的事情reduce:

import React, { Component } from 'react';

export default class DataList extends Component {
  render () {
    const array = [
      {def: 'item1', term: 'term1', obj1: 'rand'}, 
      {def: 'item2', term: 'term2'}
    ];

    return (
      <dl>
        {array.reduce((acc, item, idx) => {
            return acc.concat([
                <dt key={`def-${idx}`}>{item.def}</dt>,
                <dd key={`term-${idx}`}>{item.term}</dd>
            ]);
        }, [])}
      </dl>
    );
  }
}

演示:: https://jsfiddle.net/rifat/caray95v/

Answer 2

React 16.2增加了支持Fragments,你可以像这样使用它:

return (
  <dl>
    {_.map(array, (item) => {
      return (
        <Fragment>
          <dt>{item.def}</dt>
          <dd>{item.term}</dd>
        </Fragment>
      )
    })}
  </dl>
)

您还可以将Fragment与空标记一起使用,如下所示:

return (
  <dl>
    {_.map(array, (item) => {
      return (
        <>
          <dt>{item.def}</dt>
          <dd>{item.term}</dd>
        </>
      )
    })}
  </dl>
)

但请记住,如果要key在Fragment标记上使用该属性,则必须使用其完整版本.有关此 react博客的更多信息