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

Question

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

有问题的组件

• 父服务器组件

  Get

• 子客户端组件

  Button

• 子服务器组件

  AverageSalary

我想达到什么目标

单击

<button>

组件中的

Button

HTML 元素时，应呈现

<h2>

HTML 元素。

更改

toggleShowData

客户端组件中

true

的状态（无论是

false

还是

Button

）是

<h2>

服务器组件中的

AverageSalary

HTML 元素应该（不）渲染的条件.

代码

父服务器组件

Get.js

*:

import { getAverageSalary } from "./getAverageSalary";
import AverageSalary from "./AverageSalary";
import Button from "./Button";

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

    return (
        <>
            <Button />
            <AverageSalary data={averageSalary} />
        </>
    );
}

子客户端组件

Button.js

:

"use client";

import { useState, useEffect } from "react";

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

    useEffect(() => {
        console.log(toggleShowData);
    }, [toggleShowData]);

    function handleClick() {
        setShowData(true);
    }

    return <button onClick={handleClick}>GET average salary</button>;
}

子服务器组件

AverageSalary.js

:

export default async function AverageSalary({ data }) {
    return (
        <>
            {/* Conditionally show this element */}
            <h2>{data}</h2>
        </>
    );
}

*实用函数

getAverageSalary.js

（用于获取数据）：

import "server-only";

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

    return res.text();
}

Answer 1

使用CSS。除了在渲染后操作 DOM 之外，实际上没有办法将数据从客户端组件向上发送到服务器组件。在某些情况下，您可以使用搜索参数或 cookie，但似乎不适合这种情况。如果您不希望内容在应该隐藏时闪烁，请使用隐藏它的初始类，然后将其设置为客户端的

useEffect

挂钩中应有的内容，或者如果您想最初显示它，只需添加一个第二个“隐藏”状态并根据用户交互进行设置。