时间戳

首页 > 解决方案 > 显示属于该对象的项目列表

reactjs - 显示属于该对象的项目列表

问题描述

我正在学习在其他人的项目中使用 GraphQL 和 React，并且我正在尝试了解它们是如何协同工作的。

有一个物体，我们称之为墙。这面墙与对象绘画具有 has_many 关系。已经存在名为 PaintingList 的组件。在 Wall 组件中，我想呈现属于它的所有绘画的列表。

所有查询都已创建，但我只需要将其正确呈现到前端。

这对我来说现在都非常抽象，如果不清楚，我很抱歉..

墙体组件：

const Wall = ({ Wall }) => {
    return(
        Some data from the wall
        Display all Paintings belonging to the wall
    );
};

对于每一面墙，我都想展示属于它的绘画。由于 Wall has_many Paintings 和 Painting has_one 墙，这是否意味着有一些更简单的方法来渲染它们，还是我需要比较 ID？

标签： reactjsgraphql

解决方案

在不知道Wall看起来很困难的情况下，您应该Array.map为每幅画使用并返回 JSX。这是一个任意示例

const Wall = ({ Wall }) => {
    return (
        <div>
            {Wall.title}

            <ul>
                {Wall.paintings.map(painting => {
                    return <li><img src={painting.src} /></li>
                })}
            </ul>
        </div>
    );
};

推荐阅读