在 React JSX 中返回成对元素答案

【问题标题】：returning paired elements in React JSX在 React JSX 中返回成对元素
【发布时间】：2016-06-16 15:58:18
【问题描述】：

问题：

在 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 结构。

【问题讨论】：

标签： javascript reactjs react-jsx

【解决方案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/

【讨论】：

哈，非常好......我花了几秒钟才弄清楚它是如何工作的，这是唯一的缺点（即从代码可读性 POV 中稍微难以理解），但更多优雅的解决方案，也是我从现在开始使用的解决方案。
还有一点：一般不建议您使用数组中的索引作为键。这是一篇很棒的帖子：medium.com/@robinpokorny/…
Fragment 将是现在解决此问题的推荐方法。

【解决方案2】：

React 16.2 增加了对Fragments 的支持，你可以这样使用它：

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

你也可以像这样使用带有空标签的片段：

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

但请记住，如果您想在Fragment 标签上使用key 属性，您必须使用它的完整版本。更多信息请访问 thisreact 博客

【讨论】：

【解决方案3】：

我发现实现这一点的最简单方法是为数组的每个项目映射对象键（lodash 支持这一点）并有条件地渲染每种类型的元素。

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 _.map(item, (elem, key) => {
            if (key === 'def') {
              return <dt>{elem}</dt>
            } else if (key === 'term') {
              return <dd>{elem}</dd>
            }
          })
        })}
      </dl>
    )
  }
}

【讨论】：