[英]React JSX: Iterating through a hash and returning JSX elements for each key
[英]returning paired elements in React JSX
问题:
在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结构。
您可以使用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>
);
}
}
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>
)
但请记住,如果要在Fragment
标记上使用key
属性,则必须使用它的完整版本。 有关此 react博客的更多信息
我发现实现这一目标的最简单方法是为数组的每个项映射对象键(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>
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.