Reactで動的リンクを作成！JavaScript式からカスタムコンポーネントまで
以下では、Reactのレンダー関数で動的なhrefを作成する方法について、いくつかの例を用いて解説します。
JavaScript式を使う
最も簡単な方法は、JavaScript式を使って動的なhrefを作成することです。例えば、以下のコードは、idプロップで指定されたIDに基づいてリンクを作成します。
import React from 'react';
const Link = ({ id }) => {
return (
<a href={`https://example.com/users/${id}`}>
ユーザー {id}
</a>
);
};
export default Link;
useMemoフックを使うと、パフォーマンスを向上させることができます。useMemoフックは、依存関係が変更されない限り、関数を一度だけ実行します。
import React, { useMemo } from 'react';
const Link = ({ id }) => {
const href = useMemo(() => `https://example.com/users/${id}`, [id]);
return (
<a href={href}>
ユーザー {id}
</a>
);
};
export default Link;
条件分岐を使って、状況に応じて異なるhrefを作成することができます。
import React from 'react';
const Link = ({ id, isLoggedIn }) => {
if (isLoggedIn) {
return (
<a href={`https://example.com/users/${id}/profile`}>
プロフィール
</a>
);
} else {
return (
<a href={`https://example.com/users/${id}/login`}>
ログイン
</a>
);
}
};
export default Link;
配列をループして、それぞれの要素に基づいてリンクを作成することができます。
import React from 'react';
const Links = ({ users }) => {
return (
<ul>
{users.map(user => (
<li key={user.id}>
<a href={`https://example.com/users/${user.id}`}>
{user.name}
</a>
</li>
))}
</ul>
);
};
export default Links;
カスタムコンポーネントを使って、より複雑なhrefを作成することができます。
import React from 'react';
const UserLink = ({ id, name }) => {
return (
<a href={`https://example.com/users/${id}`}>
{name}
</a>
);
};
const Links = ({ users }) => {
return (
<ul>
{users.map(user => (
<li key={user.id}>
<UserLink id={user.id} name={user.name} />
</li>
))}
</ul>
);
};
export default Links;
これらの例は、Reactのレンダー関数で動的なhrefを作成するためのほんの一例です。状況に応じて、さまざまな方法で動的なhrefを作成することができます。
import React from 'react';
const Link = ({ id }) => {
return (
<a href={`https://example.com/users/${id}`}>
ユーザー {id}
</a>
);
};
export default Link;
このコードは、idプロップで指定されたIDに基づいてリンクを作成します。例えば、以下のコンポーネントでこのコードを使用すると、以下のようなHTMLが生成されます。
<a href="https://example.com/users/1">
ユーザー 1
</a>
useMemoフックを使う
import React, { useMemo } from 'react';
const Link = ({ id }) => {
const href = useMemo(() => `https://example.com/users/${id}`, [id]);
return (
<a href={href}>
ユーザー {id}
</a>
);
};
export default Link;
このコードは、useMemoフックを使って、href変数をキャッシュします。idプロップが変更されない限り、href変数は再計算されません。
条件分岐を使う
import React from 'react';
const Link = ({ id, isLoggedIn }) => {
if (isLoggedIn) {
return (
<a href={`https://example.com/users/${id}/profile`}>
プロフィール
</a>
);
} else {
return (
<a href={`https://example.com/users/${id}/login`}>
ログイン
</a>
);
}
};
export default Link;
このコードは、isLoggedInプロップに基づいて、異なるリンクを作成します。
配列をループする
import React from 'react';
const Links = ({ users }) => {
return (
<ul>
{users.map(user => (
<li key={user.id}>
<a href={`https://example.com/users/${user.id}`}>
{user.name}
</a>
</li>
))}
</ul>
);
};
export default Links;
このコードは、users配列をループして、それぞれの要素に基づいてリンクを作成します。
カスタムコンポーネントを使う
import React from 'react';
const UserLink = ({ id, name }) => {
return (
<a href={`https://example.com/users/${id}`}>
{name}
</a>
);
};
const Links = ({ users }) => {
return (
<ul>
{users.map(user => (
<li key={user.id}>
<UserLink id={user.id} name={user.name} />
</li>
))}
</ul>
);
};
export default Links;
このコードは、UserLinkというカスタムコンポーネントを使って、より複雑なhrefを作成します。
Reactのレンダー関数で動的なhrefを作成するその他の方法
React Routerを使うと、URLに基づいてコンポーネントをレンダリングすることができます。これにより、動的なhrefを簡単に作成することができます。
import React from 'react';
import { Link } from 'react-router-dom';
const UserLink = ({ id, name }) => {
return (
<Link to={`/users/${id}`}>
{name}
</Link>
);
};
const Links = ({ users }) => {
return (
<ul>
{users.map(user => (
<li key={user.id}>
<UserLink id={user.id} name={user.name} />
</li>
))}
</ul>
);
};
export default Links;
Zustandは、Reactアプリケーション用のグローバルステート管理ライブラリです。Zustandを使って、動的なhrefに必要なデータをグローバルステートに保存することができます。
import React from 'react';
import { useStore } from 'zustand';
const store = create({
users: [],
});
const UserLink = ({ id, name }) => {
const { users } = useStore();
const user = users.find(user => user.id === id);
if (!user) {
return null;
}
return (
<a href={user.profileUrl}>
{name}
</a>
);
};
const Links = () => {
const { users } = useStore();
return (
<ul>
{users.map(user => (
<li key={user.id}>
<UserLink id={user.id} name={user.name} />
</li>
))}
</ul>
);
};
export default Links;
Next.jsは、Reactアプリケーションを構築するためのサーバーサイドレンダリングフレームワークです。Next.jsを使うと、動的なURLを簡単に作成することができます。
import React from 'react';
const User = ({ id, name }) => {
return (
<div>
<h1>{name}</h1>
<p>プロフィールは <a href={`/users/${id}/profile`}>こちら</a> をご覧ください。</p>
</div>
);
};
export default User;
これらの方法はほんの一例であり、状況に応じてさまざまな方法で動的なhrefを作成することができます。
Reactのレンダー関数で動的なhrefを作成するには、さまざまな方法があります。状況に応じて、最適な方法を選択してください。
javascript reactjs
