JSX

Question

Sorun yanıt verin. Örneğin.

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

burada DOM yapısını kıracak bir kap elemanı, onları sarma olmadan kardeşlerin hale izin vermez yanıt verin.

Answer 1

Böyle reduce ile daha basit bir şey yapabilirsiniz:

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

Bunu gerçekleştirmenin en kolay yolunu, nesnenin her bir öğesi için nesne anahtarlarının (bu özelliği destekler) eşlemesi ve her bir öğe türünü koşullu olarak oluşturmasıdır.

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

bu gibi kullanabilirsiniz, 16.2 Fragments desteği eklendi tepki:

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

Ayrıca, aşağıdaki gibi boş etiketli Fragmenti kullanabilirsiniz:

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

Ama Fragment etiketi üzerinde key özellik kullanmak istiyorsanız bunu tam sürümünü kullanmak zorunda olduğunu unutmayın. this react's blogu hakkında daha fazla bilgi