2

我正在尝试开发一个简单的应用程序，其中任意数量的任务都将呈现为卡片。我将它们作为道具传递，计划如下：

taskList: [{
            taskID: 1,
            taskTitle: 'Task 1',
            taskDescription: 'Description 1',
            completed: true
        }]

申请方案

通过在 TaskCard 组件中记录道具，我可以看到列表完全一样。如果我尝试记录诸如之类的props[0].taskDescription内容，它将成功返回“描述 1”，如下所示：

export default function TaskCard(props) {
return(
    <div className="task-card" draggable>
        <h3> Test </h3>
        { props[0].taskDescription } // this actually works
    </div>
)
}

但是，我无法映射或计算道具的长度以遍历道具。

我在迭代方面做错了什么？就组件化而言，它是一个有缺陷的架构吗？

4

2 回答 2

1

要呈现任务卡列表，您需要taskList在该组件外部进行映射，如下所示：

{taskList.map(task => <TaskCard task={task} />)}

然后TaskCard将使用传递的task道具进行渲染：

TaskCard(props) {
// use props.task.taskDescription, etc.
}
于 2020-08-08T17:28:18.760 回答
0

首先，感谢所有在原始帖子的评论中提供见解的人。所以是的，显然将数组作为道具传递很麻烦。我可能没有以最有效的方式解决问题，但这就是到目前为止的结果。使用原始帖子中的图像来指导自己。

我已经通过以下方式解决了这个问题：

用户区域.jsx

  • 包含记录用户的状态、用户名、包含待处理任务pendingList的列表和包含完整任务的列表completedList；

  • 它呈现一个标题，PendingArea 和 CompleteArea 组件传递{...this.state}给它们中的每一个（完整的组件是一个对象）。

    render(){
    return(
        <div className="user-area-container">
            <div className="profile-header">
                <h2>{ this.state.userName }</h2>
                    { this.state.email }
            </div>

            <PendingArea {...this.state} />
            <CompletedArea {...this.state} />
        </div>
    )
}

PendingArea.jsx 和 CompleteArea.jsx

在这里，我进行了过滤，仅将等效映射传递给每个组件。PendingArea 组件的代码如下：

function PendingArea(props) {

var pendingTasks = props.pendingList.map(task => {
    return <TaskCard {...task} />
});

return(
    <div className="status-container">
        <div className="status-title">
            <h2>Pending tasks</h2>
        </div>

        <div className="status-modifier">
            { pendingTasks }
        </div>
    </div>
)
}

任务卡.jsx

最后，TaskCard 组件使用来自 props 的直接属性：

export default function TaskCard(props) {
return(
    <div className="task-card" draggable>
        <h3> { props.taskTitle } </h3>
        { props.taskDescription }
    </div>
)
}

通过这种方式，我设法将任务卡正确地呈现在应有的位置。我希望这也适用于任何阅读本文的人。

于 2020-08-08T18:28:16.753 回答