如何根据客户端组件状态条件式渲染服务端组件？

涉及组件 #

• 父服务端组件 Get
• 子客户端组件 Button
• 子服务端组件 AverageSalary

需求目标 #

点击Button组件内的<button>元素时，渲染AverageSalary组件中的<h2>元素；以Button客户端组件中toggleShowData状态（取值true或false）作为AverageSalary服务端组件中<h2>元素的渲染条件。

实现思路 #

服务端组件无法直接使用客户端状态钩子，因此需要通过一个客户端容器组件托管状态，将状态变化传递给服务端组件，实现条件渲染：

1. 新增客户端容器组件维护toggleShowData状态
2. 父服务端组件预获取数据后传递给客户端容器
3. Button组件通过回调触发容器内的状态切换
4. AverageSalary组件根据接收的状态参数决定是否渲染目标元素

修改后的完整代码 #

1. 客户端容器组件 SalaryContainer.js #

"use client";

import { useState } from "react";
import Button from "./Button";
import AverageSalary from "./AverageSalary";

export default function SalaryContainer({ averageSalary }) {
    const [toggleShowData, setShowData] = useState(false);

    return (
        <>
            <Button onToggle={() => setShowData(!toggleShowData)} />
            <AverageSalary data={averageSalary} show={toggleShowData} />
        </>
    );
}

2. 父服务端组件 Get.js #

import { getAverageSalary } from "./getAverageSalary";
import SalaryContainer from "./SalaryContainer";

export default async function Get() {
    const averageSalary = await getAverageSalary();

    return <SalaryContainer averageSalary={averageSalary} />;
}

3. 子客户端组件 Button.js #

"use client";

export default function Button({ onToggle }) {
    return <button onClick={onToggle}>GET average salary</button>;
}

4. 子服务端组件 AverageSalary.js #

export default function AverageSalary({ data, show }) {
    return show ? <h2>{data}</h2> : null;
}

工具函数 getAverageSalary.js（保持不变） #

import "server-only";

export async function getAverageSalary() {
    const res = await fetch(`http://localhost:3001/`);

    return res.text();
}

内容的提问来源于stack exchange，提问作者not-a