u-ecmaker
commented
7 months ago Reactの状態管理を使用して、TableOfContentsの表示/非表示を制御することができます。具体的には、useStateフックを使用して表示状態を管理し、ContentsButtonがクリックされたときにその状態を切り替えます。
まず、PostDetailTemplate.tsx で新しい状態変数を作成します。
次に、TableOfContentsの表示をこの状態に基づいて制御します。
最後に、ContentsButtonにonClickプロップを追加して、ボタンがクリックされたときにshowTableOfContentsを切り替えるようにします。
ただし、これを行うにはContentsButtonがonClickプロップを受け取るように変更する必要があります。
これで、ContentsButtonがクリックされるとTableOfContentsの表示が切り替わります。
src\components\@templates\PostDetailTemplate.tsx
export const PostDetailTemplate: FC<Props> = ({ post, comments, onSubmit }) => {
const [showTableOfContents, setShowTableOfContents] = useState(false);
return (
<div className="">
<ContentsButton onClick={() => setShowTableOfContents(prev => !prev)} />
</div>
<div className="w-aside">
<Bio />
<div className="sticky top-[52px] mt-4 space-y-4">
{showTableOfContents && <TableOfContents blocks={post.children} />}
<PostMeta meta={post} commentCount={comments.length} />
</div>
</div>
</div>
</div>
);
};
src\components\@layouts\ContentsButton.tsx ContentsButton.tsxのコードには誤りがあります。onClickプロパティはbutton要素に適用する必要があります。 ContentsButtonコンポーネントは親コンポーネントから渡されたonClick関数を実行します。これにより、ボタンがクリックされたときに親コンポーネントで定義された動作（この場合はTableOfContentsの表示切り替え）が実行されます。
import type { FC } from 'react';
type Props = {
onClick: () => void;
};
export const ContentsButton: FC<Props> = ({ onClick }) => {
return (
<button
className="flex cursor-pointer items-center gap-2 sp:gap-1 rounded-md border-none bg-gray-700 px-2 py-1.5 font-Baloo text-base text-white shadow hover:brightness-125"
onClick={onClick}
>
Contents
</button>
);
};
スマホ表示にしたときでもToCが表示される
zennのようなイメージ
