ritorno elementi accoppiati in Reagire JSX

Question

Il problema:

In Reagire, si vuole creare una struttura DOM mappando un array, ma ogni elemento dell'array deve restituire 2 elementi. per esempio.

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

Reagire non consente il rendering fratelli senza avvolgendoli in un elemento contenitore, che possa annullare la struttura DOM qui.

Answer 1

Si potrebbe fare qualcosa di più semplice con reduce come questo:

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

DEMO :: https://jsfiddle.net/rifat/caray95v/

Answer 2

Ho trovato che il modo più semplice per ottenere ciò è mappare le chiavi dell'oggetto (lodash supporta questo) per ogni elemento dell'array e rendere condizionatamente ogni tipo di elemento.

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

Answer 3

Reagire 16.2 Aggiunto il supporto per Fragments, è possibile utilizzarlo in questo modo:

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

Puoi anche usare Fragment con tag vuoto come questo:

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

Ma tenere presente che se si desidera utilizzare l'attributo key su Fragment tag è necessario utilizzare la versione completa di esso. Maggiori informazioni su this react's blog