Question

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

有一个对象，我们称它为Wall。该墙与对象Paint具有has_many关系。已经存在名为PaintingList的组件。在“墙”组件中，我要呈现一个属于它的所有绘画的列表。

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

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

墙组件：

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

我想为每面墙显示属于它的绘画。由于Wall has_many绘画墙和Painting has_one绘画墙，这是否意味着存在一些更简单的渲染方法，还是我需要比较ID？

Answer 1

在不知道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>
    );
};

显示属于对象的项目列表

1 个答案: