Javascript 通过对象循环,若条件满足,则返回附加标记
我在一个对象中循环,它在Javascript 通过对象循环,若条件满足,则返回附加标记,javascript,css,reactjs,oop,jsx,Javascript,Css,Reactjs,Oop,Jsx,我在一个对象中循环,它在DropZone对象中循环4次 每个DropZone都有一个id dropZones: { 'zone-1': { id: 'zone-1', title: 'zone-1', info: 'Strongest', items: [ { id: 1, content: 'I am label 1' },
DropZone
对象中循环4次
每个DropZone
都有一个id
dropZones: {
'zone-1': {
id: 'zone-1',
title: 'zone-1',
info: 'Strongest',
items: [
{ id: 1, content: 'I am label 1' },
{ id: 2, content: 'I am label 2' },
],
maxItems: 3,
color: '#8bea97',
},
'zone-2': {
id: 'zone-2',
title: 'zone-2',
info: 'Strong',
items: [],
maxItems: 5,
color: '#bef7c6',
},
'zone-3': {
id: 'zone-3',
title: 'zone-3',
info: 'Weakest',
items: [{ id: 4, content: 'I am label 4' }],
color: '#e6ffe9',
},
'start-zone': {
id: 'start-zone',
title: 'Inactive',
info: 'Inactive',
items: [
{ id: 5, content: 'I am label 5' },
{ id: 6, content: 'I am label 6' },
{ id: 7, content: 'I am label 7' },
{ id: 8, content: 'I am label 8' },
{ id: 9, content: 'I am label 9' },
],
color: 'white',
},
},
对于第四个Dropzone,它的id为start zone
,我想呈现一些JSX标记
我检查dropzone的zoneId是否为start zone
,然后循环遍历它以呈现我的标记
if (zoneId === 'start-zone') {
dropZone.items.map(item => (
<Placeholder>
<Title>Labels</Title>
<PlaceholderButton type="button" onClick={() => setShowInput(!showInput)}>
+
</PlaceholderButton>
<Item
draggable
onDrag={() => {
setDragSource(dropZone.id)
setDraggedItem(item)
}}
key={item.id}
>
{item.content}
</Item>
</Placeholder>
))
}
在我的控制台中没有错误来说明为什么会发生这种情况。是否有更好的方法为my
DropZone
呈现特定标记 我认为问题在于没有保存.map()的结果并将其传递给渲染
在你的if里面,你做了
if (zoneId === 'start-zone') {
dropZone.items.map(item => (
...
)
但是您没有将其分配给变量,因此结果JSX被丢弃
试一试
let结果;
如果(zoneId==‘开始区域’){
结果=dropZone.items.map(item=>(
...
)
}
返回(
onDragOver(事件)}
数据可丢弃
id={dropZone.id}
key={dropZone.id}
onDragLeave={onDragLeave}
>
{result}
)
但是,您不会对dropZone.items.map()的结果进行任何处理。您只是在显示的代码中立即将其丢弃。
if (zoneId === 'start-zone') {
dropZone.items.map(item => (
...
)
let result;
if (zoneId === 'start-zone') {
result = dropZone.items.map(item => (
...
)
}
return (
<DropZone
onDragOver={event => onDragOver(event)}
data-droppable
id={dropZone.id}
key={dropZone.id}
onDragLeave={onDragLeave}
>
{result}
</DropZone>
)