🔄
React Componentを逆順に表示する
前置き
自分のポートフォリオを作成しているとき、
経歴が時系列の昇順になっていることに気づきました。
しかし、Wantedlyを見ると降順になっていることがわかります。このフォーマットに揃えたいですね。
しかし今となってはこの量のコンポーネントを逆順にするのはかなり骨が折れます...
戦略
ここでは例として、以下のようなコンポーネントを逆順にすることを目標とします。
page.tsx
<div>
<p>a</p>
<p>b</p>
<p>c</p>
</div>
↑上記がc, b, aのような順番になってほしい
-
<ReverseComponent>を作る - 目的のコンポーネントをそれで囲う
ReverseComponentの作成
以下のようなReverseComponentを作成します
ReverseComponent.tsx
import React from "react";
export default function ReverseComponent(props: {
children: React.ReactNode;
}) {
const { children } = props;
const reverse = props.reverse ?? true;
if (Array.isArray(children)) {
return children.slice().reverse();
}
return children;
}
childrenに複数のコンポーネントが渡された場合、Arrayとして渡されます。よって、Arrayであるか判定した際、そうであれば.reverse()で逆順にします
.sliceについて
childrenはreadOnlyで渡されるため、破壊的挙動をする.reverse()は使えません。よって、.slice()でシャローコピーを行い、それを用います。
コンポーネントを囲う
page.tsx
<div>
+ <ReverseComponent>
<p>a</p>
<p>b</p>
<p>c</p>
+ </ReverseComponent>
</div>
無事に逆順になりました
切り替えられるようにする
ReverseComponent.tsx
import React from "react";
export default function ReverseComponent(props: {
children: React.ReactNode;
+ reverse?: boolean;
}) {
const { children } = props;
+ const reverse = props.reverse ?? true;
if (Array.isArray(children)) {
- return children.slice().reverse();
+ return reverse ? children.slice().reverse() : children;
}
return children;
}
page.tsx
<div>
- <ReverseComponent>
+ <ReverseComponent reverse={false}>
<p>a</p>
<p>b</p>
<p>c</p>
</ReverseComponent>
</div>
動的に昇順/降順を切り替えられるようになりました。
ポートフォリオへ適用
コンポーネントを一つ作っただけなので、すごく楽に逆順にできました。また、ついでに逆順にできるボタンも作ってみました。
Discussion