遍历对象，如果满足条件，则返回附加标记答案

【问题标题】：Loop through object, if condition is met, return additional mark up遍历对象，如果满足条件，则返回附加标记
【发布时间】：2020-05-23 02:00:24
【问题描述】：

我正在循环一个对象，它循环了 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',
          },
        },

对于 ID 为 start-zone 的第 4 个 Dropzone，我想渲染一些 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>
                ))
              }

我的Item 渲染得很好。但是<Title />、PlaceholderButton 没有在我的 UI 中呈现。

这是完整的循环

<div onDrop={onDrop}>
        {Object.keys(currentAnswer).length !== 0
          ? zoneOrder.map(zoneId => {
              const dropZone = currentAnswer[zoneId]
              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>
                ))
              }
              return (
                <DropZone
                  onDragOver={event => onDragOver(event)}
                  data-droppable
                  id={dropZone.id}
                  key={dropZone.id}
                  onDragLeave={onDragLeave}
                >
                  {dropZone.items.map(item => (
                    <Item
                      draggable
                      onDrag={() => {
                        setDragSource(dropZone.id)
                        setDraggedItem(item)
                      }}
                      key={item.id}
                    >
                      {item.content}
                      <DropZoneLabel>{dropZone.title}</DropZoneLabel>
                    </Item>
                  ))}
                </DropZone>
              )
            })
          : null}

我的控制台中没有任何错误表明会发生这种情况。有没有更好的方法为我的DropZone 呈现特定标记？

【问题讨论】：

不过，您不会对dropZone.items.map() 的结果做任何事情。您只是在显示的代码中立即将其丢弃。

标签： javascript css reactjs oop jsx

【解决方案1】：

我认为问题在于您没有保存 .map() 的结果并将其传递给渲染。

在你的如果，你做

 if (zoneId === 'start-zone') {
                dropZone.items.map(item => (
  ...
)

但您没有将它分配给变量，因此生成的 JSX 被丢弃。

试试

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

【讨论】：