如何在react render()方法中从嵌套循环中正确打印值?

问题描述 投票:0回答:2

正如您在下面的代码示例中看到的那样,它是react组件中render()块的一部分,我试图在外部循环中呈现变量“folder”的值。不幸的是,代码部分

<div>{folder}</div>

似乎被忽略了。任何人都可以帮助我找到从外部循环输出当前文件夹值的正确语法?

{
    folders.map((folder,_index1) => {

        <div>{folder}</div>

        return (
                items.map((item, index) => {
                return (
                        <div>
                        {(folder === item.folder) ?
                                <Draggable
                                key={item.id}
                                draggableId={item.id}
                                index={index}>
                                {(provided, snapshot) => (
                                <div
                                    ref={provided.innerRef}
                                    { ...provided.draggableProps }
                                    { ...provided.dragHandleProps }
                                    style={getItemStyle(
                                    snapshot.isDragging,
                                    provided.draggableProps.style
                                    )}>
                                    <div>
                                    {item.content}
                                    </div>
                                </div>
                                )}
                            </Draggable>
                            : null
                        } 
                        </div>

         )})
    )})
}
javascript reactjs typescript
2个回答
0
投票

遵循Zydnar上面的评论:

它应该是这样的:

{
    folders.map((folder,_index1) => {
        return (
                <> // or <React.Fragment> with the corresponding closing tag
                    <div>{folder}</div> // this has to be part of what is returned
                    items.map((item, index) => {
                       return (
                           <div>
                             {(folder === item.folder) ?
                                ...
                </>

         )})
    )})
}
© www.soinside.com 2019 - 2024. All rights reserved.