React Componentで外部リンクを開く際にtarget="_blank" rel="noopener"を付与する
ReactのComponentで、外部リンクを開く際に[[target="_blank" rel="noopener"]]を付与するようにしたい。
以下のようにすれば、条件に応じたプロパティの設定ができる。
const Link: React.FunctionComponent = ({ url, title }) => {
const linkProps = url => {
if (url.match("^http")) {
return {
target: "_blank",
rel: "noopener"
};
}
return {};
};
return (
<a
className="block w-full h-full"
href={url}
{...linkProps(url)}
>
{title}
</a>
)
}