如何允许用户从 Next.js/React 中的服务器渲染列表中单击某个项目？

Question

对react/next.js来说相当新，并且在我认为非常基本的事情上遇到了麻烦。但是，我似乎找不到任何适用于我的具体情况的答案。

基本上，在页面加载时，我有一个组件，可以通过简单的 prisma 查询返回带有艺术家姓名的歌曲列表。我希望用户能够单击一首歌曲，并且为了简单起见，在控制台中显示歌曲名称和艺术家姓名。我该怎么办？这是返回歌曲列表的组件“StemList”的代码：

import prisma from "@/components/stemdatabase"
export async function getStems(stemType) {
    return prisma.stems.findMany({
        where: {
            stem_type: stemType
        }
    })
}

export default async function StemList({ stemType }) {
    const stems = await getStems(stemType)

    return (
        <>
            {stems.map((stem) => (
                <ul className='song-title' key={stem.id} stemType={stemType}>
                    {stem.song_name} - {stem.artist_name}
                </ul>
            ))}
        </>
    )
}

我尝试包含 onClick 属性，但我很快发现这不能在服务器端组件上使用。我也无法将其转换为客户端组件，因为我正在查询我的数据库文件。我似乎找不到 onClick 的合适/简单的替代方案，尽管我觉得这应该是一个非常基本的功能。

Answer 1

您可以将客户端组件包装在服务器组件内，然后将列表作为道具传递给客户端。

您的服务器组件加载列表：

import prisma from "@/components/stemdatabase"

export async function getStems(stemType) {
    return prisma.stems.findMany({
        where: {
            stem_type: stemType
        }
    })
}

export default async function StemList({ stemType }) {
    const stems = await getStems(stemType)
    return <InteractiveStemList stems={stems} stemType={stemType} />
}

您的客户端组件使其具有交互性：

"use client";

export default function InteractiveStemList({ stems, stemType }) {
    return (
        <ul>
            {stems.map((stem) => (
                <li className='song-title' key={stem.id} stemType={stemType}>
                    <a onClick={/* callback goes here */}>{stem.song_name} - {stem.artist_name}</a>
                </li>
            ))}
        </ul>
    )
}

您还可以使用 服务器操作 使您的点击触发服务器端的某些内容。